{% 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-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="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="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>

        <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
        >

        <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 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">
              <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">
                      Video processing…
                    </span>
                  {% elif item.processing_status == "failed" %}
                    <span
                      class="badge text-bg-danger"
                      title="{{ item.processing_error }}"
                    >
                      Conversion failed
                    </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_item', item_id=item.id) }}"
              >
                Edit / replace
              </a>
              <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 }}">
                      Remove 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>
{% endblock %}