{% extends "base.html" %}

{% block title %}Content library · LibreSignage{% endblock %}

{% block head %}
  <link
    rel="stylesheet"
    href="{{ url_for('content.static', filename='css/content.css') }}"
  >
  {% if has_processing %}
    <meta http-equiv="refresh" content="5">
  {% endif %}
{% endblock %}

{% block content %}
  <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
    <div>
      <h1 class="mb-1">Content library</h1>
      <p class="text-body-secondary mb-0">
        Add images, video, PDFs, text, clocks, web pages, and RSS feeds.
      </p>
    </div>
    <div class="d-flex gap-2">
      <a class="btn btn-outline-secondary" href="{{ url_for('content.recycle_bin') }}">Recycle bin</a>
      <a class="btn btn-outline-primary" href="{{ url_for('content.templates') }}">
        Create from template
      </a>
      <a class="btn btn-primary" href="{{ url_for('content.playlists') }}">
        Manage playlists
      </a>
    </div>
  </div>

  <div class="row g-4">
    <div class="col-lg-5">
      <form method="post" enctype="multipart/form-data" class="card card-body">
        <h2 class="h5">Add content</h2>

        <label class="form-label" for="target_screen_id">Design for screen</label>
        <select class="form-select mb-3" id="target_screen_id" name="target_screen_id">
          <option value="">No target screen</option>
          {% for screen, profile in screens %}
            <option value="{{ screen.id }}" data-width="{{ profile.resolution_width }}" data-height="{{ profile.resolution_height }}" {% if selected_screen and selected_screen[0].id == screen.id %}selected{% endif %}>{{ screen.name }} · {{ profile.resolution_label }} · {{ profile.orientation }}</option>
          {% endfor %}
        </select>
        <div class="alert alert-info py-2" id="target-profile" {% if not selected_screen %}hidden{% endif %}>
          <strong>Display profile:</strong>
          <span id="target-profile-label">{% if selected_screen %}{{ selected_screen[1].resolution_label }} · {{ selected_screen[1].orientation }}{% endif %}</span>
        </div>
        <div class="alert alert-warning" id="orientation-warning" role="alert" hidden>
          This media orientation differs from the selected display.
          <div class="form-check mt-2">
            <input class="form-check-input" id="orientation_acknowledged" name="orientation_acknowledged" type="checkbox">
            <label class="form-check-label" for="orientation_acknowledged">Upload anyway</label>
          </div>
        </div>

        <label class="form-label" for="title">Title</label>
        <input
          class="form-control mb-3"
          id="title"
          name="title"
          value="{{ request.form.get('title', '') }}"
          required
        >

        <label class="form-label" for="kind">Format</label>
        <select class="form-select mb-3" id="kind" name="kind" required>
          {% for kind in content_kinds %}
            <option
              value="{{ kind }}"
              {% if request.form.get('kind') == kind %}selected{% endif %}
            >
              {{ kind|upper }}
            </option>
          {% endfor %}
        </select>

        <div id="upload-field">
          <label class="form-label" for="file">File</label>
          <input class="form-control mb-3" id="file" name="file" type="file">
        </div>

        <div id="source-field" hidden>
          <label class="form-label" for="source" id="source-label">Text or URL</label>
          <textarea
            class="form-control mb-3"
            id="source"
            name="source"
            rows="4"
            aria-describedby="source-help"
          >{{ request.form.get('source', '') }}</textarea>
          <div class="form-text mb-3" id="source-help"></div>
        </div>

        <div id="stream-fallback-field" hidden>
          <label class="form-label" for="fallback_content_item_id">Offline fallback</label>
          <select class="form-select mb-3" id="fallback_content_item_id" name="fallback_content_item_id">
            <option value="">Choose a ready image or video</option>
            {% for fallback in fallback_items %}
              <option value="{{ fallback.id }}" {% if request.form.get('fallback_content_item_id') == fallback.id|string %}selected{% endif %}>{{ fallback.title }} · {{ fallback.kind }}</option>
            {% endfor %}
          </select>
        </div>

        <div id="qr-fields" hidden>
          <label class="form-label" for="qr_mode">QR code type</label>
          <select class="form-select mb-3" id="qr_mode" name="qr_mode">
            <option value="website">Website</option>
            <option value="contact">Contact card</option>
          </select>
          <div id="qr-contact-fields" hidden>
            <label class="form-label" for="qr_name">Contact name</label>
            <input class="form-control mb-3" id="qr_name" name="qr_name" maxlength="120">

            <label class="form-label" for="qr_organization">Organization</label>
            <input class="form-control mb-3" id="qr_organization" name="qr_organization" maxlength="120">

            <label class="form-label" for="qr_phone">Phone</label>
            <input class="form-control mb-3" id="qr_phone" name="qr_phone" type="tel" maxlength="40">

            <label class="form-label" for="qr_email">Email</label>
            <input class="form-control mb-3" id="qr_email" name="qr_email" type="email" maxlength="254">

            <label class="form-label" for="qr_website">Website</label>
            <input class="form-control mb-3" id="qr_website" name="qr_website" type="url" placeholder="https://example.com">

            <fieldset>
              <legend class="h6">Address <span class="text-body-secondary">(optional)</span></legend>
              <label class="form-label" for="qr_address_street">Street address</label>
              <input class="form-control mb-3" id="qr_address_street" name="qr_address_street" maxlength="120">

              <div class="row g-3">
                <div class="col-sm-7">
                  <label class="form-label" for="qr_address_city">City</label>
                  <input class="form-control" id="qr_address_city" name="qr_address_city" maxlength="120">
                </div>
                <div class="col-sm-5">
                  <label class="form-label" for="qr_address_region">State / region</label>
                  <input class="form-control" id="qr_address_region" name="qr_address_region" maxlength="120">
                </div>
                <div class="col-sm-5">
                  <label class="form-label" for="qr_address_postal_code">Postal code</label>
                  <input class="form-control" id="qr_address_postal_code" name="qr_address_postal_code" maxlength="120">
                </div>
                <div class="col-sm-7">
                  <label class="form-label" for="qr_address_country">Country</label>
                  <input class="form-control mb-3" id="qr_address_country" name="qr_address_country" maxlength="120">
                </div>
              </div>
            </fieldset>
          </div>
        </div>

        <div class="form-check mb-3" id="offline-snapshot-field" hidden>
          <input class="form-check-input" id="offline_snapshot_enabled" name="offline_snapshot_enabled" type="checkbox" {% if request.form.get('offline_snapshot_enabled') == 'on' %}checked{% endif %}>
          <label class="form-check-label" for="offline_snapshot_enabled">Capture an offline screenshot when publishing</label>
          <div class="form-text">Requires the optional Playwright snapshot service on the server.</div>
        </div>

        <label class="form-label" for="duration_seconds">Duration (seconds)</label>
        <input
          class="form-control mb-3"
          id="duration_seconds"
          name="duration_seconds"
          type="number"
          min="1"
          max="86400"
          value="{{ request.form.get('duration_seconds', '10') }}"
          required
        >

        <div id="transcode-profile-field" hidden>
          <label class="form-label" for="transcode_profile">Video output profile</label>
          <select class="form-select mb-3" id="transcode_profile" name="transcode_profile">
            <option value="original">Original dimensions</option>
            <option value="1080p">Up to 1080p</option>
            <option value="4k">Up to 4K</option>
          </select>
        </div>

        <label class="form-label" for="folder">Folder</label>
        <input
          class="form-control mb-3"
          id="folder"
          name="folder"
          value="{{ request.form.get('folder', '') }}"
          list="content-folders"
          maxlength="100"
          placeholder="Seasonal campaigns"
        >
        <datalist id="content-folders">
          {% for folder in folders %}<option value="{{ folder }}">{% endfor %}
        </datalist>

        <label class="form-label" for="tags">Tags</label>
        <input
          class="form-control mb-3"
          id="tags"
          name="tags"
          value="{{ request.form.get('tags', '') }}"
          placeholder="summer, lobby, promotion"
          aria-describedby="tags-help"
        >
        <div class="form-text mb-3" id="tags-help">
          Separate up to 10 tags with commas.
        </div>

        <label class="form-label" for="expires_on">Expiry date</label>
        <input
          class="form-control mb-3"
          id="expires_on"
          name="expires_on"
          type="date"
          value="{{ request.form.get('expires_on', '') }}"
          aria-describedby="expiry-help"
        >
        <div class="form-text mb-3" id="expiry-help">
          After this date, the asset is retained but automatically skipped in playback.
        </div>

        <button class="btn btn-primary" type="submit">Add to library</button>
      </form>
    </div>

    <div class="col-lg-7">
      <form id="bulk-form" method="post" action="{{ url_for('content.bulk_items', q=query, folder=selected_folder) }}" class="card card-body mb-3">
        <h2 class="h6">Bulk actions</h2>
        <div class="row g-2">
          <div class="col-md-4">
            <select class="form-select" name="action" aria-label="Bulk action" required>
              <option value="">Choose action</option>
              <option value="expire">Set expiry date</option>
              <option value="clear-expiry">Clear expiry</option>
              <option value="move">Move folder</option>
              <option value="add-tags">Add tags</option>
              <option value="remove-tags">Remove tags</option>
              <option value="delete">Move to recycle bin</option>
            </select>
          </div>
          <div class="col-md-5"><input class="form-control" name="bulk_value" placeholder="Date, folder, or comma-separated tags"></div>
          <div class="col-md-3 d-grid"><button class="btn btn-outline-primary" type="submit">Apply to selected</button></div>
        </div>
      </form>
      <form method="get" class="card card-body mb-3" role="search">
        <div class="row g-2 align-items-end">
          <div class="col-md-6">
            <label class="form-label" for="library-search">Search library</label>
            <input
              class="form-control"
              id="library-search"
              name="q"
              value="{{ query }}"
              placeholder="Title, URL, text, folder, or tag"
            >
          </div>
          <div class="col-md-4">
            <label class="form-label" for="folder-filter">Folder</label>
            <select class="form-select" id="folder-filter" name="folder">
              <option value="">All folders</option>
              {% for folder in folders %}
                <option value="{{ folder }}" {% if selected_folder == folder %}selected{% endif %}>
                  {{ folder }}
                </option>
              {% endfor %}
            </select>
          </div>
          <div class="col-md-2 d-grid">
            <button class="btn btn-outline-primary" type="submit">Search</button>
          </div>
        </div>
        {% if query or selected_folder %}
          <a class="small mt-2" href="{{ url_for('content.index') }}">Clear filters</a>
        {% endif %}
      </form>

      {% if items %}
        <div class="list-group">
          {% for item in items %}
            {% set item_usage = usage[item.id] %}
            <div class="list-group-item d-flex align-items-center gap-3">
              <input class="form-check-input" form="bulk-form" name="item_ids" type="checkbox" value="{{ item.id }}" aria-label="Select {{ item.title }}">
              <span class="content-kind">
                {{ item.display_kind|upper }}
              </span>
              <div class="flex-grow-1 overflow-hidden">
                <h2 class="h6 mb-1 text-truncate">{{ item.title }}</h2>
                <small class="text-body-secondary">
                  {{ item.duration_seconds }} seconds
                  {% if item.filename %} · uploaded file{% endif %}
                  {% if item.template_slug %} · {{ item.template_slug }}{% endif %}
                  {% if item.widget_type %} · {{ item.source }}{% endif %}
                </small>
                <div class="small mt-1">
                  {% if item.processing_status in ("pending", "processing") %}
                    <span class="badge text-bg-info" data-processing-status data-status-url="{{ url_for('content.processing_status', item_id=item.id) }}">
                      Video processing… {{ item.processing_progress }}%
                    </span>
                  {% elif item.processing_status == "failed" %}
                    <span
                      class="badge text-bg-danger"
                      title="{{ item.processing_error }}"
                    >
                      Conversion failed
                    </span>
                  {% endif %}
                  {% if item.processing_status == "cancelled" %}<span class="badge text-bg-warning">Cancelled</span>{% endif %}
                  {% if item.folder %}
                    <span class="badge text-bg-secondary">{{ item.folder }}</span>
                  {% endif %}
                  {% for tag in item.tag_list %}
                    <span class="badge rounded-pill text-bg-light">{{ tag }}</span>
                  {% endfor %}
                  {% if item.expired %}
                    <span class="badge text-bg-danger">Expired {{ item.expires_on }}</span>
                  {% elif item.expires_on %}
                    <span class="badge text-bg-warning">Expires {{ item.expires_on }}</span>
                  {% endif %}
                  <span
                    class="badge text-bg-{{ 'info' if item_usage.playlist_count else 'light' }}"
                    title="{{ item_usage.playlist_names|join(', ') }}"
                  >
                    Used in {{ item_usage.playlist_count }}
                    {{ "playlist" if item_usage.playlist_count == 1 else "playlists" }}
                  </span>
                </div>
              </div>
              <a
                class="btn btn-sm btn-outline-secondary"
                href="{{ url_for('content.edit_template_item', item_id=item.id) if item.template_slug else url_for('content.edit_item', item_id=item.id) }}"
              >
                Edit / replace
              </a>
              <a class="btn btn-sm btn-outline-info" href="{{ url_for('content.item_usage', item_id=item.id) }}">Usage</a>
              {% if item.processing_status in ('pending', 'processing') %}
                <form method="post" action="{{ url_for('content.cancel_processing', item_id=item.id) }}"><button class="btn btn-sm btn-outline-warning" type="submit">Cancel</button></form>
              {% elif item.processing_status in ('failed', 'cancelled') and item.kind == 'video' %}
                <form method="post" action="{{ url_for('content.retry_processing', item_id=item.id) }}"><button class="btn btn-sm btn-outline-primary" type="submit">Retry</button></form>
              {% endif %}
              <form
                method="post"
                action="{{ url_for('content.delete', item_id=item.id) }}"
              >
                {% if item_usage.playlist_count %}
                  <div class="form-check mb-1">
                    <input
                      class="form-check-input"
                      id="confirm-delete-{{ item.id }}"
                      name="confirm_usage"
                      type="checkbox"
                      value="yes"
                      required
                    >
                    <label class="form-check-label small" for="confirm-delete-{{ item.id }}">
                      Pause playlist usage
                    </label>
                  </div>
                {% endif %}
                <button class="btn btn-sm btn-outline-danger" type="submit">
                  Delete
                </button>
              </form>
            </div>
          {% endfor %}
        </div>
      {% else %}
        <div class="content-empty text-center border rounded p-5">
          <h2 class="h5">The library is empty</h2>
          <p class="text-body-secondary mb-0">
            {% if query or selected_folder %}
              No assets match these filters.
            {% else %}
              Add content, then arrange it in a playlist.
            {% endif %}
          </p>
        </div>
      {% endif %}
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <script src="{{ url_for('content.static', filename='js/content-form.js') }}"></script>
  {% if has_processing %}<script src="{{ url_for('content.static', filename='js/content-jobs.js') }}"></script>{% endif %}
{% endblock %}