@php
    $styles = [
        ['value' => 'btn-secondary', 'label' => 'Sage (solid)'],
        ['value' => 'btn-primary',   'label' => 'Outline'],
        ['value' => 'btn-dark-grey', 'label' => 'Dark grey'],
    ];

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

    $targets = [
        ['value' => '_self',  'label' => 'Same tab'],
        ['value' => '_blank', 'label' => 'New tab'],
    ];

    $field = function ($name) use ($item) {
        return "components[{$item->id}][values][{$name}]";
    };
    $old = function ($name, $default = '') use ($item, $sub) {
        return old("components.{$item->id}.values.{$name}", $sub->$name ?? $default);
    };
@endphp

<div class="pb-5">

    <div class="form-row">
        <div class="form-group col-sm-6">
            <label>Button Text</label>
            <input class="form-control" type="text" name="{{ $field('label') }}" value="{{ $old('label') }}" placeholder="e.g. Discuss your project">
        </div>

        <div class="form-group col-sm-6">
            <label>Link</label>
            <input class="form-control" type="text" name="{{ $field('url') }}" value="{{ $old('url') }}" placeholder="e.g. /contact, #contact or https://...">
        </div>
    </div>

    <div class="form-row">
        <div class="form-group col-sm-4">
            <label>Style</label>
            <select name="{{ $field('style') }}" class="form-control">
                @foreach($styles as $option)
                    <option value="{{ $option['value'] }}" {{ $old('style', 'btn-secondary') == $option['value'] ? 'selected' : '' }}>{{ $option['label'] }}</option>
                @endforeach
            </select>
        </div>

        <div class="form-group col-sm-4">
            <label>Alignment</label>
            <select name="{{ $field('align') }}" class="form-control">
                @foreach($alignments as $option)
                    <option value="{{ $option['value'] }}" {{ $old('align', 'text-left') == $option['value'] ? 'selected' : '' }}>{{ $option['label'] }}</option>
                @endforeach
            </select>
        </div>

        <div class="form-group col-sm-4">
            <label>Open In</label>
            <select name="{{ $field('target') }}" class="form-control">
                @foreach($targets as $option)
                    <option value="{{ $option['value'] }}" {{ $old('target', '_self') == $option['value'] ? 'selected' : '' }}>{{ $option['label'] }}</option>
                @endforeach
            </select>
        </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="ComponentButton">

</div>