@component('backoffice._components.tab', ['item' => 'Content', 'active' => true])
<fieldset class="form-horizontal">
    {{ html()->translations(function () {
        return [
            html()->horizontalFormGroup()->required()->text('name', 'Name'),
            html()->horizontalFormGroup()->required()->text('slug', 'Slug'),
            html()->horizontalFormGroup()->required()->text('label', 'Label'),
            html()->horizontalFormGroup()->required()->textarea('description', 'Description'),
            html()->horizontalFormGroup()->required()->richTextarea('content', 'Content'),
        ];
    }) }}
</fieldset>
@endcomponent

@component('backoffice._components.tab', ['item' => 'Media'])
<fieldset class="form-horizontal">
    {{ html()->horizontalFormGroup()->media('featured', 'image', 'Featured') }}
</fieldset>
@endcomponent

@component('backoffice._components.tab', ['item' => 'Related contents'])
<fieldset class="form-horizontal">
    {{ html()->alert('info', 'Hold the CTRL key and click the items in the list to choose them') }}
    {{ html()->horizontalFormGroup()->manyToManyPolymorph('fragmentContents', 'Fragment contents', 'FragmentContent') }}
    {{-- html()->horizontalFormGroup()->manyToManyPolymorph('pages', 'Pages', 'Page') --}}
</fieldset>
@endcomponent

@component('backoffice._components.tab', ['item' => 'Fragments'])
<fieldset class="form-horizontal">
    {{-- html()->horizontalFormGroup()->manyToManyPolymorph('fragments', 'Fragment', 'Fragment') --}}

    <div class="row">
        <div class="col-lg-5">
            {{ html()->multiselect(
                'select-fragments',
                $restFragments
            )
            ->attributes([
                'size' => $restFragments->count()
            ])
            ->id('js-select-fragments')
            ->class('c-form-list-box__list') }}
        </div>
        <div class="col-lg-2 d-flex justify-content-center align-items-center text-center">
            <button class="js-add-item-to-pick-list c-form-list-box__button" data-from="js-select-fragments" data-to="js-pick-fragments">
                <i class="fa fa-angle-right"></i>
            </button>
            <button class="js-remove-item-to-pick-list c-form-list-box__button" data-from="js-pick-fragments" data-to="js-select-fragments">
                <i class="fa fa-angle-left"></i>
            </button>
        </div>
        <div class="col-lg-5">
            {{ html()->multiselect(
                'fragments[]',
                $modelFragments->pluck('name','id'),
                $modelFragments->pluck('id')
            )
            ->value($modelFragments->pluck('id'))
            ->attributes([
                'size' => $restFragments->count()
            ])
            ->id('js-pick-fragments')
            ->class('c-form-list-box__list') }}

            {{ html()->alert('info', 'Hold the CTRL key and click the items in the list to choose them') }}
        </div>
    </div>
</fieldset>
@endcomponent

@component('backoffice._components.tab', ['item' => 'Meta'])
<fieldset class="form-horizontal">
    {{ html()->seo() }}
</fieldset>
@endcomponent