<div class="c-video  js-video @if($errors->has((string)$attribute->getKey())) has-error @endif {!!$attribute->getStyleClass()!!}"
     data-key="{{$attribute->getKey()}}"
     title="{{ $errors->get((string)$attribute->getKey()) != [] ? $errors->get((string)$attribute->getKey())[0] : ''}}"

    @foreach($attribute->getDataAttributes() as $dataAttributeName => $dataAttributeValue)
        {{ $dataAttributeName }}="{{ $dataAttributeValue }}"
    @endforeach

>

    <div class="c-video__grid">

        <p class="c-video__label">
            {{ $attribute->getLabelText() }}
        </p>

        <div class="c-video__fields">

            <label for="{{ (string)$attribute->getKey() }}_video_id" class="c-video__id">
                <span class="c-video__title">Video ID:</span>
                <span class="c-video__url">https://www.youtube.com/watch?v=</span>
                <input class="c-video__input  js-video-id" name="{{ (string)$attribute->getKey() }}_video_id"  id="{{ (string)$attribute->getKey() }}_video_id" type="text" value=""/>
            </label>

            <div class="c-video__autoplay">
                <label for="{{ (string)$attribute->getKey() }}_autoplay" class="c-video__title">Autoplay:</label>
                <input class="c-video__checkbox" name="{{ (string)$attribute->getKey() }}_autoplay"  id="{{ (string)$attribute->getKey() }}_autoplay" type="checkbox">
            </div>

        </div>

        <a class="c-video__preview  js-video-link" target="_blank">
            <img class="c-video__thumb  js-video-thumb" alt="video preview" />
        </a>
    </div>

    {{-- Hidden input to combined the above inputs into --}}
    {{-- TODO: make a video table where these things are saved as own keys --}}
    <input type="hidden" name="{{ (string)$attribute->getKey() }}" value="{{ $attribute->getValue() }}">

</div>