{% comment %} Combined Add / Edit asset modal. Mode is driven by the
   parent homeApp() Alpine state (mode === 'add' | 'edit'); editAsset
   carries the inline JSON blob produced by the to_json filter. Layout
   uses the shared .modal-overlay + .modal-card pattern so the look
   matches the delete + reboot/shutdown prompts. Each form renders its
   own footer so the Save button is always inside the right <form>.
{% endcomment %}
<div
  x-show="mode"
  x-cloak
  class="modal-overlay"
  @keydown.escape.window="closeModal()"
  @click.self="closeModal()"
>
  <div class="modal-card">
    <div class="modal-card__header">
      <h2 x-text="mode === 'edit' ? 'Edit asset' : 'Add asset'"></h2>
      <button type="button" class="modal-card__close" @click="closeModal()" aria-label="Close">
        <i class="ti ti-x"></i>
      </button>
    </div>

    {# ---- Add mode ---- #}
    <div x-show="mode === 'add'" x-data="{ tab: 'uri' }">
      <div class="modal-card__body" style="padding-bottom: var(--space-3)">
        <ul class="app-tabs mb-4" id="add-asset-nav-tabs">
          <li class="app-tab-item">
            <button type="button" id="tab-uri"
              class="app-tab-link" :class="tab === 'uri' && 'active'"
              @click="tab = 'uri'">
              <i class="ti ti-link mr-1"></i>From URL
            </button>
          </li>
          <li class="app-tab-item">
            <button type="button"
              class="app-tab-link upload-asset-tab" :class="tab === 'file' && 'active'"
              @click="tab = 'file'">
              <i class="ti ti-cloud-upload mr-1"></i>Upload file
            </button>
          </li>
        </ul>
      </div>

      <form
        x-show="tab === 'uri'"
        method="post"
        action="{% url 'anthias_app:assets_create' %}"
        hx-post="{% url 'anthias_app:assets_create' %}"
        hx-target="#asset-table"
        hx-swap="outerHTML"
        hx-on::after-request="if (event.detail.successful) { window.dispatchEvent(new CustomEvent('asset-saved')); }"
      >
        {% csrf_token %}
        <div class="modal-card__body" style="padding-top: 0">
          <div class="app-floating mb-3">
            <input type="url" class="app-input" id="add-uri" name="uri" placeholder=" " required>
            <label for="add-uri">Asset URL</label>
          </div>
          <p class="muted-label m-0">Web pages, hosted images, hosted videos, and streaming URLs are all supported.</p>
        </div>
        <div class="modal-card__footer">
          <button type="button" class="app-btn app-btn-link" @click="closeModal()">Cancel</button>
          <button type="submit" id="add-form" class="app-btn app-btn-primary">
            <i class="ti ti-plus"></i><span>Add asset</span>
          </button>
        </div>
      </form>

      <form
        x-show="tab === 'file'"
        method="post"
        action="{% url 'anthias_app:assets_upload' %}"
        enctype="multipart/form-data"
        hx-post="{% url 'anthias_app:assets_upload' %}"
        hx-encoding="multipart/form-data"
        hx-target="#asset-table"
        hx-swap="outerHTML"
        @htmx:xhr:loadstart="onUploadStart()"
        @htmx:xhr:progress="onUploadProgress($event)"
        @htmx:after-request="onUploadDone($event)"
      >
        {% csrf_token %}
        <div class="modal-card__body" style="padding-top: 0">
          <label
            for="add-file"
            class="upload-dropzone"
            :class="{ 'is-disabled': uploadState }"
            x-show="!uploadState"
          >
            <i class="ti ti-cloud-upload" style="font-size: 2.25rem; opacity: 0.55"></i>
            <p class="mb-1 font-semibold mt-2">Click to choose a file</p>
            <p class="muted-label mb-0">Image or video. Upload starts immediately.</p>
            {% comment %}
              Browser MIME globs cover JPEG/PNG/WebP/GIF/MP4/WebM/MKV out of
              the box. iOS HEIC and TIFF still slip through `image/*` on
              some browsers, and macOS QuickTime .mov / .m4v likewise on
              `video/*` — listing extensions explicitly keeps the file
              picker showing them as selectable rather than greyed out.
              The server-side normalisation pipeline (exotic image
              formats → WebP, exotic video codecs → board-appropriate
              H.264/HEVC MP4) makes the wider accept range safe to
              surface here.
            {% endcomment %}
            <input type="file" class="hidden" id="add-file" name="file_upload"
              accept="image/*,video/*,.heic,.heif,.tif,.tiff,.bmp,.ico,.tga,.jp2,.j2k,.jpx,.jpc,.jpf,.avif,.mov,.m4v,.mkv,.webm,.avi,.mpg,.mpeg,.ts,.flv"
              @change="if ($event.target.files.length) { uploadFileName = $event.target.files[0].name; $event.target.form.requestSubmit() }">
          </label>

          <div class="upload-progress" x-show="uploadState" x-cloak>
            <div class="upload-progress__head">
              <i class="ti" :class="uploadState === 'sending' ? 'ti-cloud-upload' : 'ti-refresh upload-progress__spin'"></i>
              <div class="upload-progress__text">
                <p class="m-0 font-semibold" x-text="uploadFileName || 'Uploading…'"></p>
                <p class="muted-label m-0" x-text="uploadState === 'sending'
                  ? `Uploading… ${uploadProgress}%`
                  : 'Processing on server…'"></p>
              </div>
            </div>
            <div class="upload-progress__bar">
              <div class="upload-progress__fill"
                :style="`width: ${uploadState === 'sending' ? uploadProgress : 100}%`"
                :class="uploadState === 'processing' && 'upload-progress__fill--indeterminate'"></div>
            </div>
          </div>
        </div>
        <div class="modal-card__footer">
          <button type="button" class="app-btn app-btn-link" @click="closeModal()" :disabled="uploadState === 'processing'">
            <span x-text="uploadState ? 'Hide' : 'Cancel'"></span>
          </button>
        </div>
      </form>
    </div>

    {# ---- Edit mode ---- #}
    {% comment %} `advancedOpen` auto-expands when the asset already has any
       non-default value in the Advanced block (weekday subset, day-parting
       times, nocache, skip_asset_check) so existing settings aren't hidden
       behind a closed disclosure. `isUploadedAsset` collapses the readonly
       URI row for filesystem-stored uploads — the path is meaningless to
       operators; remote URLs (web pages, hosted media, streaming) keep it.
    {% endcomment %}
    <template x-if="mode === 'edit' && editAsset">
      <form
        method="post"
        :action="`/assets/${editAsset.asset_id}/update/`"
        x-bind:hx-post="`/assets/${editAsset.asset_id}/update/`"
        hx-target="#asset-table"
        hx-swap="outerHTML"
        hx-on::after-request="if (event.detail.successful) { window.dispatchEvent(new CustomEvent('asset-saved')); }"
        x-data="{
          get isUploadedAsset() {
            const u = editAsset && editAsset.uri ? String(editAsset.uri) : '';
            return !(u.startsWith('http://') || u.startsWith('https://') ||
                     u.startsWith('rtsp://') || u.startsWith('rtmp://'));
          },
          get hasAdvancedDefaults() {
            const days = editAsset.play_days_list || [];
            const refresh = editAsset.metadata && editAsset.metadata.refresh_interval_s;
            return days.length === 7 &&
                   !editAsset.play_time_from &&
                   !editAsset.play_time_to &&
                   !editAsset.nocache &&
                   !editAsset.skip_asset_check &&
                   !refresh;
          },
          advancedOpen: false,
        }"
        x-init="advancedOpen = !hasAdvancedDefaults"
      >
        {% csrf_token %}
        <div class="modal-card__body">
          {% comment %} Top-of-modal failure banner. Rendered when the
             normalisation pipeline wrote metadata.error_message via
             _NormalizeAssetTask.on_failure. UnsupportedVideoCodecError
             additionally attaches metadata.error_recipe — an ffmpeg
             command pre-filled with the upload's filename — which we
             render in a <code> block plus a copy button so the
             operator can paste it straight into their terminal.
          {% endcomment %}
          <div
            x-show="editAsset.metadata && editAsset.metadata.error_message"
            x-cloak
            class="modal-alert modal-alert--warning mb-4"
            x-data="{
              copied: false,
              copyRecipe($refs) {
                const recipe = (editAsset.metadata && editAsset.metadata.error_recipe) || '';
                if (!recipe) return;
                const flash = () => {
                  this.copied = true;
                  setTimeout(() => { this.copied = false }, 2000);
                };
                /* navigator.clipboard is only available in secure
                   contexts (HTTPS or localhost). Anthias deploys
                   plain HTTP by default, so we fall back to a
                   transient hidden textarea + execCommand on
                   insecure origins. Either path leaves the recipe
                   on the system clipboard. */
                if (window.isSecureContext && navigator.clipboard) {
                  navigator.clipboard.writeText(recipe)
                    .then(flash)
                    .catch(() => fallbackCopyToClipboard(recipe) && flash());
                } else {
                  if (fallbackCopyToClipboard(recipe)) flash();
                }
              }
            }"
          >
            <div class="modal-alert__head">
              <i class="ti ti-alert-triangle modal-alert__icon" aria-hidden="true"></i>
              <div>
                <p class="modal-alert__title">Processing failed</p>
                <p class="modal-alert__body" x-text="editAsset.metadata.error_message"></p>
              </div>
            </div>
            <template x-if="editAsset.metadata && editAsset.metadata.error_recipe">
              <div class="modal-alert__recipe">
                {% comment %} user-select: all lets the operator double-click → Ctrl/Cmd-C
                   even if the copy button never fires for any reason. {% endcomment %}
                <pre class="modal-alert__code"
                     style="user-select: all"
                ><code x-text="editAsset.metadata.error_recipe"></code></pre>
                <button type="button"
                        class="app-btn app-btn-secondary modal-alert__copy"
                        @click="copyRecipe()"
                        :aria-label="copied ? 'Copied' : 'Copy ffmpeg command'">
                  <i class="ti" :class="copied ? 'ti-check' : 'ti-copy'"></i>
                  <span x-text="copied ? 'Copied' : 'Copy command'"></span>
                </button>
              </div>
            </template>
          </div>

          <div class="app-floating mb-3">
            <input type="text" class="app-input" id="edit-name" name="name" :value="editAsset.name" required>
            <label for="edit-name">Name</label>
          </div>

          <div class="app-floating mb-3" x-show="!isUploadedAsset">
            <input type="text" class="app-input" id="edit-uri" :value="editAsset.uri" readonly>
            <label for="edit-uri">Asset location</label>
          </div>

          <div
            class="flex justify-between items-center mb-5 pb-3"
            style="border-bottom: 1px solid var(--color-border);"
          >
            <span class="muted-label">Type</span>
            <span class="schedule-chip text-capitalize" x-text="editAsset.mimetype"></span>
          </div>

          <section class="modal-section">
            <h3 class="modal-section__title">Availability</h3>
            <p class="modal-section__hint">
              The asset is only shown between these dates and times.
            </p>
            <div class="app-form-grid mb-3">
              <div class="app-floating">
                <input type="text" class="app-input js-flatpickr-datetime" id="edit-start" name="start_date" :value="editAsset.start_date_local" required autocomplete="off">
                <label for="edit-start">Start</label>
              </div>
              <div class="app-floating">
                <input type="text" class="app-input js-flatpickr-datetime" id="edit-end" name="end_date" :value="editAsset.end_date_local" required autocomplete="off">
                <label for="edit-end">End</label>
              </div>
            </div>

            {% comment %} Video assets must stay at duration=0 (v2 API rule) — disable
               the input for videos so the form POST omits it; the server defends too.
            {% endcomment %}
            <div class="app-floating">
              <input type="number" class="app-input" id="edit-duration" name="duration"
                :value="editAsset.mimetype === 'video' ? 0 : editAsset.duration"
                :disabled="editAsset.mimetype === 'video'" required>
              <label for="edit-duration">Duration (seconds)</label>
            </div>
          </section>

          <section class="modal-section modal-section--collapsible" :class="advancedOpen && 'is-open'">
            <button type="button" class="modal-section__toggle"
              @click="advancedOpen = !advancedOpen"
              :aria-expanded="advancedOpen ? 'true' : 'false'">
              <span class="modal-section__title">Advanced</span>
              <i class="ti ti-chevron-down modal-section__chevron"></i>
            </button>

            <div class="modal-section__body" x-show="advancedOpen" x-cloak>
              <p class="modal-section__hint">
                Restrict playback to specific weekdays and hours within the availability window. Leave times empty to play all day.
              </p>
              <div class="weekday-picker mb-3">
                <template x-for="d in [{n:1,l:'Mon'},{n:2,l:'Tue'},{n:3,l:'Wed'},{n:4,l:'Thu'},{n:5,l:'Fri'},{n:6,l:'Sat'},{n:7,l:'Sun'}]" :key="d.n">
                  <label class="weekday">
                    <input type="checkbox" name="play_days"
                      :value="d.n"
                      :checked="(editAsset.play_days_list || []).includes(d.n)">
                    <span x-text="d.l"></span>
                  </label>
                </template>
              </div>

              <div class="app-form-grid mb-4">
                <div class="app-floating">
                  <input type="text" class="app-input js-flatpickr-time" id="edit-play-from" name="play_time_from" :value="editAsset.play_time_from || ''" autocomplete="off">
                  <label for="edit-play-from">Play from</label>
                </div>
                <div class="app-floating">
                  <input type="text" class="app-input js-flatpickr-time" id="edit-play-to" name="play_time_to" :value="editAsset.play_time_to || ''" autocomplete="off">
                  <label for="edit-play-to">Play until</label>
                </div>
              </div>

              <div class="modal-section__divider"></div>

              <div class="flex flex-wrap gap-4">
                <div class="app-check app-switch m-0">
                  <input type="hidden" name="nocache" value="false">
                  <input type="checkbox" class="app-check-input" id="edit-nocache" name="nocache" value="true" :checked="editAsset.nocache">
                  <label class="app-check-label ml-2" for="edit-nocache">No cache</label>
                </div>
                <div class="app-check app-switch m-0">
                  <input type="hidden" name="skip_asset_check" value="false">
                  <input type="checkbox" class="app-check-input" id="edit-skip" name="skip_asset_check" value="true" :checked="editAsset.skip_asset_check">
                  <label class="app-check-label ml-2" for="edit-skip">Skip asset check</label>
                </div>
              </div>

              {% comment %} Per-asset auto-refresh interval (feature #2813).
                 Only meaningful for webpage assets — the viewer reads
                 metadata.refresh_interval_s in view_webpage and arms a
                 setReloadInterval D-Bus call to the QtWebEngine
                 process. 0 / empty disables; max 86400 (24h) matches
                 the v2 serializer's REFRESH_INTERVAL_S_MAX cap. The
                 input lives inside the existing Advanced disclosure
                 (rather than a top-level webpage-only section) to
                 keep the Edit modal's primary surface consistent
                 across mimetypes.
              {% endcomment %}
              <template x-if="editAsset.mimetype === 'webpage'">
                <div>
                  <div class="modal-section__divider"></div>
                  <div class="app-floating">
                    <input type="number" class="app-input" id="edit-refresh-interval"
                      name="refresh_interval_s"
                      min="0" max="{{ refresh_interval_s_max }}" step="1"
                      :value="(editAsset.metadata && editAsset.metadata.refresh_interval_s) || ''"
                      placeholder="0">
                    <label for="edit-refresh-interval">Auto-refresh interval (seconds)</label>
                  </div>
                  <p class="modal-section__hint mt-2 mb-0">
                    Reload the page on this cadence so dashboards stay current. Empty or 0 disables.
                  </p>
                </div>
              </template>
            </div>
          </section>
        </div>

        <div class="modal-card__footer">
          <button type="button" class="app-btn app-btn-link" @click="closeModal()">Cancel</button>
          <button type="submit" class="app-btn app-btn-primary">
            <i class="ti ti-check"></i><span>Save changes</span>
          </button>
        </div>
      </form>
    </template>
  </div>
</div>