@php
    $options = [
                ['tag' => 'h1', 'label' => 'Heading 1'],
                ['tag' => 'h2', 'label' => 'Heading 2'],
                ['tag' => 'h3', 'label' => 'Heading 3'],
                ['tag' => 'h4', 'label' => 'Heading 4'],
                ['tag' => 'h5', 'label' => 'Heading 5'],
                ['tag' => 'h6', 'label' => 'Heading 6'],
                ['tag' => 'p', 'label' => 'Paragraph']
        ];

    $alignments = [
        ['tag' => 'text-left', 'label' => 'Left'],
        ['tag' => 'text-center', 'label' => 'Center'],
        ['tag' => 'text-right', 'label' => 'Right']
    ];
@endphp

<div class="pb-5">

    <div class="form-group">
        <label>Content</label>
        <input class="form-control" type="text" name="components[{{$item->id}}][values][content]" id="" value="{{old("components.".$item->id.".values.content" , $sub->content ?? '' )}}">
    </div>

    <div class="form-row">

        <div class="form-group col-sm-3">

            <label>Alignment</label>
            <select name="components[{{$item->id}}][values][align]" class="form-control">

                @foreach($alignments as $option)

                <option value="{{ $option['tag'] }}" {{ (isset($sub->align) && $sub->align == $option['tag'] ? 'selected' : '') }}>{{ $option['label'] }}</option>

                @endforeach

            </select>

        </div>

        <div class="form-group col-sm-3">

            <label>Semantic Tag</label>
            <select name="components[{{$item->id}}][values][tag]" class="form-control">

                @foreach($options as $option)

                <option value="{{ $option['tag'] }}" {{ (isset($sub->tag) && $sub->tag == $option['tag'] ? 'selected' : '') }}>{{ $option['label'] }}</option>

                @endforeach

            </select>

        </div>

        <div class="form-group col-sm-3">

            <label>Display As</label>
            <select name="components[{{$item->id}}][values][display]" class="form-control">

                @foreach($options as $option)

                <option value="{{ $option['tag'] }}" {{ (isset($sub->display) && $sub->display == $option['tag'] ? 'selected' : '') }}>{{ $option['label'] }}</option>

                @endforeach

            </select>
            <small>Use this to choose the appearance of the heading, eg display a semantic Heading 3 tag as a Heading 1</small>

        </div>

    </div>

    <div class="form-row">
        <div class="form-group">
            <div class="form-group">
                <label for="inputDivider-{{$item->id}}">Divider</label>
                <div>
                    <label class="switch switch-label switch-pill switch-success switch-sm">
                    <input id="inputDivider-{{$item->id}}" class="switch-input" {{ old("components.".$item->id.".values.divider", $sub->divider ?? null) ? 'checked=""': '' }} type="checkbox" name="components[{{$item->id}}][values][divider]" value="1">
                        <span class="switch-slider" data-checked="Yes" data-unchecked="No"></span>
                    </label>
                </div>
            </div>
        </div>
    </div>

    @if(isset($post->id))
    <input type="hidden" name="components[{{$item->id}}][post_id]" value="{{$post->id}}">
    @endif
    <input type="hidden" name="components[{{$item->id}}][type]" value="ComponentHeading">

</div>