{{--
    アップロードファイル選択を生成する
    @props name file項目のname属性
    @props value デフォルト値（ファイル名）
    @props key アップロード情報キー（config.uploadで定義した情報キー）
    @props url リンクURL
    @see Action Component.inputFileDropImage
--}}
@props(['name'=>'file', 'value', 'key', 'url'])

@php
    // アップロード情報を取得する
    $type = config("upload.{$key}.info.type");

    // 表示内容を編集する
    $delCss = "w-5 h-5 mr-1 text-primary-700 bg-secondary-100 rounded border-secondary-300 
        focus:ring-primary-300 focus:ring-offset-0 focus:ring-4 outline-none";
@endphp
<div class="flex items-center gap-2">
    {{-- ｜左 --}}
    {{-- ファイル画像 --}}
    <x-file-icon :value="$value" :path="$url" />
    {{-- ｜右 --}}
    <div class="flex flex-col gap-1.5">
        {{-- ファイル選択 --}}
        <input name="{{$name}}" type="file" class="text-sm">
        <div class="flex flex-wrap items-center text-xs text-secondary-700">
            {{-- 対象ファイル条件 --}}
            &nbsp;対応ファイル：<span class="font-sansf font-bold">{{$type}}</span>
            {{-- 削除チェック --}}
            @isset($value)
            <div class="flex items-center tracking-wider">
                <span class="mx-2">｜</span>
                <input id="{{$name}}_del" name="{{$name}}_del" type="checkbox" @change="del()"
                    class="{{$delCss}}">
                <label for="{{$name}}_del">DEL</label>
            </div>
            @endisset
        </div>
        {{-- アップロードファイル名 --}}
        @isset($value)
        <div class="text-xs tracking-wider text-secondary-900 bg-secondary-50 p-1.5 rounded-md">
            {{$value}}
        </div>
        @endisset
    </div>
</div>