{% extends "admin/base_site.html" %}
{% block extrastyle %}{{ block.super }}
<style>
  .cc-works fieldset { margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--hairline-color); border-radius: 4px; }
  .cc-works legend { padding: 0 6px; font-weight: 600; }
  .cc-works__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
  .cc-works__row label { display: flex; flex-direction: column; gap: 4px; }
  .cc-works__row input[type=url] { width: min(420px, 80vw); }
  .cc-works table { width: 100%; }
  .cc-works td small { color: var(--body-quiet-color); }
  .cc-works__tag { display: inline-block; margin: 0 4px 2px 0; padding: 0 6px; border-radius: 8px; background: var(--darkened-bg); font-size: 11px; }
  .cc-works__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0; }
  .cc-works__editions { margin: 4px 0 0; padding: 0; list-style: none; font-size: 11px; color: var(--body-quiet-color); }
</style>
{% endblock %}
{% block breadcrumbs %}<div class="breadcrumbs"><a href="{% url 'admin:index' %}">Home</a> &rsaquo; <a href="{% url 'admin:app_list' app_label='catalogue_client' %}">Catalogue client</a> &rsaquo; Works</div>{% endblock %}
{% block content %}
<div class="cc-works">
  <p>Sites get every edition (language and format) of the works selected here, in their own language. Each site's managers can switch single editions off.</p>

  <fieldset>
    <legend>Catalogue server</legend>
    <form method="post" class="cc-works__row">{% csrf_token %}
      <input type="hidden" name="action" value="server">
      <label>Server URL <input type="url" name="server_url" value="{{ server_url }}" placeholder="https://catalogue.example.org"></label>
      <input type="submit" value="Use this server">
    </form>
  </fieldset>

  {% if error %}<p class="errornote">{{ error }}</p>{% endif %}

  {% if total %}
  <fieldset>
    <legend>Narrow the works</legend>
    <form method="get" class="cc-works__row">
      {% if categories %}
      <label>Category
        <select name="category">
          <option value="">All categories</option>
          {% for value, label in categories %}<option value="{{ value }}"{% if value == filters.category %} selected{% endif %}>{{ label }}</option>{% endfor %}
        </select>
      </label>
      {% endif %}
      <label>Language
        <select name="language">
          <option value="">All languages</option>
          {% for value in languages %}<option value="{{ value }}"{% if value == filters.language %} selected{% endif %}>{{ value }}</option>{% endfor %}
        </select>
      </label>
      <label>Show
        <select name="show">
          <option value="">All works</option>
          <option value="selected"{% if filters.show == "selected" %} selected{% endif %}>Selected</option>
          <option value="unselected"{% if filters.show == "unselected" %} selected{% endif %}>Not selected</option>
        </select>
      </label>
      <label>Search <input type="search" name="q" value="{{ filters.q }}"></label>
      <input type="submit" value="Filter">
    </form>
  </fieldset>

  <form method="post">{% csrf_token %}
    <input type="hidden" name="action" value="works">
    <div class="cc-works__bar">
      <strong>{{ rows|length }} of {{ total }} works shown, {{ selected_count }} selected.</strong>
      <button type="button" class="button" data-cc-check="1">Select all shown</button>
      <button type="button" class="button" data-cc-check="0">Clear all shown</button>
      <input type="submit" class="default" value="Save selection">
    </div>
    <table>
      <thead><tr><th></th><th>Work</th><th>Editions</th><th>Languages</th><th>Formats</th>{% if category_attribute %}<th>Categories</th>{% endif %}</tr></thead>
      <tbody>
      {% for row in rows %}
        <tr>
          <td><input type="hidden" name="shown" value="{{ row.slug }}"><input type="checkbox" name="work" value="{{ row.slug }}" id="work-{{ forloop.counter }}"{% if row.selected %} checked{% endif %}></td>
          <td><label for="work-{{ forloop.counter }}"><strong>{{ row.title }}</strong></label> <small>{{ row.slug }}</small>
            <ul class="cc-works__editions">{% for product in row.products %}<li><a href="{{ product.url }}" target="_blank" rel="noopener">{{ product.title }}</a> ({{ product.attributes.language|default:"?" }}{% if product.kind %}, {{ product.kind }}{% endif %})</li>{% endfor %}</ul>
          </td>
          <td>{{ row.editions }}</td>
          <td>{% for value in row.languages %}<span class="cc-works__tag">{{ value }}</span>{% endfor %}</td>
          <td>{% for value in row.kinds %}<span class="cc-works__tag">{{ value }}</span>{% endfor %}</td>
          {% if category_attribute %}<td>{% for label in row.category_labels %}<span class="cc-works__tag">{{ label }}</span>{% endfor %}</td>{% endif %}
        </tr>
      {% empty %}
        <tr><td colspan="6">No works match.</td></tr>
      {% endfor %}
      </tbody>
    </table>
    <div class="cc-works__bar"><input type="submit" class="default" value="Save selection"></div>
  </form>
  {% endif %}

  {% if missing %}<p class="help">Selected but no longer on this server: {{ missing|join:", " }}</p>{% endif %}
</div>
<script>
document.addEventListener('click', function (e) {
  var button = e.target.closest('[data-cc-check]');
  if (!button) return;
  var on = button.getAttribute('data-cc-check') === '1';
  button.form.querySelectorAll('input[name=work]').forEach(function (box) { box.checked = on; });
});
</script>
{% endblock %}