@php
    /**
     * Formulario do destaque, usado ao criar e ao alterar.
     *
     * O que muda entre as duas telas e so o destino, os valores de partida e
     * o rotulo do botao; a escolha do tipo, a lista de registros e a imagem
     * propria sao as mesmas, e manter duas copias faria uma envelhecer.
     */
    $entry = $entry ?? '';
    $imgUrl = $imgUrl ?? '';
    $description = $description ?? '';
    $link = $link ?? '';
    $target = $target ?? '0';
@endphp
    <form class="feaform" method="POST" action="{{ $action }}"
          data-url-pick="{{ url('site/featured/getData') }}"
          data-msg-saving="{{ __('site.configs_saving') }}"
          data-msg-taken="{{ __('site.page_featured_taken') }}"
          data-msg-empty="{{ __('site.page_featured_pick_empty') }}"
          data-msg-error="{{ __('site.page_featured_pick_error') }}"
          data-msg-more="{{ __('site.page_featured_pick_more') }}">

        <input type="hidden" name="entry" class="feaform__entry" value="{{ old('entry', $entry) }}">
        <input type="hidden" name="feature_image" class="feaform__img" value="{{ old('feature_image') }}">

        <section class="sec">
            <div class="sec__head">
                <h2 class="sec__title"><i class="fa-solid fa-star"></i> {{ __('site.page_featured_new_input_1') }}</h2>
            </div>

            <div class="sec__body">
                <div class="kinds">
                    @foreach($kinds as $key => $kind)
                        {{-- (string) porque o PHP converte chave numérica de array para int,
                             e sem isso a comparação estrita nunca casa e nada nasce marcado --}}
                        <label class="kind">
                            <input type="radio" name="type" value="{{ $key }}" @checked((string) $key === (string) $type)>
                            <span class="kind__ico"><i class="fa-solid {{ $kind['icon'] }}"></i></span>
                            <span class="kind__text">
                                <strong>{{ $kind['label'] }}</strong>
                                <small>{{ $kind['desc'] }}</small>
                            </span>
                            <span class="kind__tick"><i class="fa-solid fa-check"></i></span>
                        </label>
                    @endforeach
                </div>
            </div>
        </section>

        {{-- escolher o registro apontado: vale para tudo que não é imagem própria --}}
        <section class="sec feapick" {{ $type === '0' ? 'hidden' : '' }}>
            <div class="sec__head feapick__head">
                <h2 class="sec__title"><i class="fa-solid fa-hand-pointer"></i> {{ __('site.page_featured_pick_title') }}</h2>

                <div class="ltools__search feapick__search">
                    <i class="fa-solid fa-magnifying-glass"></i>
                    <input class="input feapick__q" type="text" autocomplete="off"
                           placeholder="{{ __('site.page_featured_new_placeh') }}">
                </div>
            </div>

            <div class="sec__body">
                @if(session('error_entry'))
                    <p class="field__err feapick__err">{{ session('error_entry') }}</p>
                @endif

                {{-- esqueleto no formato dos cartões reais, para a área não pular quando os dados chegam --}}
                <div class="pickskel">
                    @for($i = 0; $i < 6; $i++)
                        <div class="pickskel__item">
                            <span class="pickskel__img"></span>
                            <span class="pickskel__line"></span>
                            <span class="pickskel__line pickskel__line--short"></span>
                        </div>
                    @endfor
                </div>

                <div class="pickgrid"></div>

                <p class="pickstate" hidden></p>

                <button class="btn btn--ghost pickmore" type="button" hidden>{{ __('site.page_featured_pick_more') }}</button>
            </div>
        </section>

        {{-- imagem própria --}}
        <section class="sec feaown" {{ $type === '0' ? '' : 'hidden' }}>
            <div class="sec__head">
                <h2 class="sec__title"><i class="fa-solid fa-image"></i> {{ __('site.page_featured_new_block_title') }}</h2>
            </div>

            <div class="sec__body">
                <div class="feaown__grid">
                    {{-- div e não form: form aninhado é descartado pelo parser do navegador,
                         e a caixa some junto com a classe que o dropzone procura --}}
                    <div class="feaown__preview feadrop" data-url="{{ route('site.featured.r.upload') }}">
                        <img class="feaown__img" src="{{ $imgUrl }}" alt="" {{ $imgUrl ? '' : 'hidden' }}>

                        <span class="feaown__empty">
                            <i class="fa-solid fa-cloud-arrow-up"></i>
                            <span>{{ __('site.page_featured_drop_here') }}</span>
                        </span>

                        <span class="feaown__change">{{ __('site.page_featured_change_image') }}</span>
                    </div>

                    <div class="feaown__fields">
                        <label class="field">
                            <span class="field__label">{{ __('site.page_featured_new_input_3') }}</span>
                            <input class="input" type="text" name="description" value="{{ old('description', $description) }}" maxlength="255">
                            @if(session('error_description'))
                                <span class="field__err">{{ session('error_description') }}</span>
                            @endif
                        </label>

                        <label class="field">
                            <span class="field__label">{{ __('site.page_featured_new_input_4') }}</span>
                            <input class="input" type="url" name="link" value="{{ old('link', $link) }}" placeholder="https://">
                        </label>
                    </div>
                </div>
            </div>
        </section>

        <section class="sec">
            <div class="sec__body">
                <label class="row">
                    <span class="row__text">
                        <strong>{{ __('site.page_featured_new_input_2') }}</strong>
                        <small>{{ __('site.page_featured_target_help') }}</small>
                    </span>
                    <span class="switch">
                        <input type="checkbox" name="target" value="1" @checked(old('target', $target) == '1')>
                        <span class="switch__track"><span class="switch__knob"></span></span>
                    </span>
                </label>
            </div>
        </section>

        <div class="feaform__foot">
            <a class="btn btn--ghost" href="{{ route('site.featured.r') }}">{{ __('site.btn_cancel') }}</a>
            <button class="btn btn--primary feaform__submit" type="submit">
                @include('includes.spinner')
                <span class="btn__label">{{ $submit }}</span>
            </button>
        </div>
    </form>