@php $type = $type ?? 'admin'; @endphp
<dialog id="media_upload_modal">
  <div class="mu-shell">

    {{-- Header --}}
    <div class="mu-head">
      <span id="mu-title">{{ __('Media Uploads') }}</span>
      <button type="button" class="icon-btn mu-close" aria-label="{{ __('Close') }}">
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
      </button>
    </div>

    {{-- Tabs --}}
    <div class="mu-tabs">
      <button type="button" class="mu-tab on" id="upload_media_image" data-mu-panel="upload">
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
        {{ __('Upload Files') }}
      </button>
      <button type="button" class="mu-tab" id="load_all_media_images" data-mu-panel="library" data-selectedimage="">
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="m3 9 4-4 4 4 4-4 4 4"/><path d="M3 15h18"/></svg>
        {{ __('Media Library') }}
      </button>
    </div>

    {{-- Panel: Upload --}}
    <div class="mu-panel" id="mu-panel-upload">
      <form action="{{ route($type.'.upload.media.file') }}" method="post"
            id="placeholderfForm" class="dropzone" enctype="multipart/form-data">
        @csrf
      </form>
    </div>

    {{-- Panel: Library --}}
    <div class="mu-panel" id="mu-panel-library" style="display:none">
      <div class="mu-library">

        {{-- Grid --}}
        <div class="mu-grid-wrap">
          <div class="image-preloader-wrapper">
            <div class="mu-spinner">
              <svg class="icon" style="width:24px;height:24px;animation:mu-spin 1s linear infinite;color:var(--text-3,#5a6172)" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
            </div>
          </div>
          <ul class="media-uploader-image-list"></ul>
          <div id="loadmorewrap" style="display:none">
            <button type="button" class="btn sm">{{ __('Load more') }}</button>
          </div>
        </div>

        {{-- Info panel --}}
        <div class="media-uploader-image-info">
          <div class="img-wrapper">
            <img src="" alt="" style="display:none">
          </div>
          <div class="img-info">
            <p class="img-title" style="font-size:12px;font-weight:600;color:var(--text,#e8eaf0);margin:0 0 8px;word-break:break-all"></p>
            <ul class="img-meta" style="display:none;list-style:none;padding:0;margin:0 0 10px;font-size:11px;color:var(--text-3,#5a6172);line-height:1.9">
              <li class="date"></li>
              <li class="dimension"></li>
              <li class="size"></li>
              <li class="image_id" style="display:none"></li>
              <li class="imgsrc" style="word-break:break-all"></li>
              <li class="imgalt">
                <div class="img-alt-wrap" style="display:flex;gap:4px;margin-top:6px">
                  <input type="text" name="img_alt_tag"
                         style="flex:1;padding:5px 8px;font-size:11px;border:1px solid var(--border,#22262f);border-radius:6px;background:var(--surface-2,#181b23);color:var(--text,#e8eaf0);outline:none"
                         placeholder="{{ __('Alt text') }}">
                  <button type="button" class="btn sm img_alt_submit_btn">
                    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  </button>
                </div>
              </li>
            </ul>
            <a tabindex="0" style="display:none" class="btn sm media_library_image_delete_btn" data-type="{{ $type }}" role="button" style="color:var(--danger)">
              <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"/></svg>
              {{ __('Delete') }}
            </a>
          </div>
        </div>

      </div>
    </div>

    {{-- Footer --}}
    <div class="mu-foot">
      <button type="button" class="btn ghost sm mu-close">{{ __('Cancel') }}</button>
      <button type="button" class="btn primary sm media_upload_modal_submit_btn" style="display:none">
        {{ __('Set Image') }}
      </button>
    </div>

  </div>
</dialog>