<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>