{% extends "tesm_core/base.html" %}
{% from "tesm_core/macros.html" import field, checkbox, textarea_field, alert, pill %}

{% block page_title %}Ticket anlegen{% endblock %}
{% block page_sub %}Kunde, Typ, Module und Laufzeit{% endblock %}

{% block breadcrumb %}
<nav class="breadcrumb">
  <span><a href="{{ url_for('tickets.overview') }}">Tickets</a></span><span>Neu</span>
</nav>
{% endblock %}

{% block content %}
<form method="post" action="{{ url_for('tickets.create') }}">
  <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
  <div class="grid grid--split">
    <div class="stack">
      <section class="card">
        <div class="card__header">
          <div class="flex-1"><div class="card__title">{{ icon('ticket', size=17) }} Grunddaten</div></div>
        </div>
        <div class="card__body stack">
          <label class="field">
            <span class="field__label">Kunde <span class="req">*</span></span>
            <select class="select" name="customer_id" required>
              <option value="">bitte wählen</option>
              {% for customer in customers %}
                <option value="{{ customer.id }}"
                  {% if preselected_customer == customer.id %}selected{% endif %}>
                  {{ customer.name }}{% if customer.city %} &middot; {{ customer.city }}{% endif %}
                </option>
              {% endfor %}
            </select>
            <span class="field__hint">
              Der Kunde ist nach dem Anlegen unveränderlich -- der Self-Service-Link ist an ihn
              gebunden.
            </span>
          </label>

          <label class="field">
            <span class="field__label">Lizenztyp</span>
            <select class="select" name="type" id="ticket-type">
              {% for value in types %}
                <option value="{{ value }}" {% if value == 'standard' %}selected{% endif %}>
                  {{ type_labels.get(value, value) }}
                </option>
              {% endfor %}
            </select>
            <span class="field__hint">
              Standard: Grundfunktionen. Individüll: Module frei wählbar. Enterprise: alle
              Module. Testlizenz: 30 Tage.
            </span>
          </label>

          <fieldset class="fieldset" id="module-box">
            <legend>Module (nur bei &bdquo;Individüll&ldquo;)</legend>
            <div class="stack stack--tight">
              {% for module in modules %}
                {{ checkbox('modules', module_labels[module], value=module) }}
              {% endfor %}
            </div>
          </fieldset>

          <div class="form-grid">
            {{ field('valid_days', 'Laufzeit (Tage)', value=default_valid_days, type='number') }}
          </div>
          {{ checkbox('lifetime', 'Unbefristet',
                      hint_text='Nicht kombinierbar mit einer Testlizenz -- das wäre eine
                      permanente Lizenz ohne Module.') }}
          {{ textarea_field('notes', 'Interne Notiz', rows=2) }}
        </div>
      </section>

      {% if may_create_license_server %}
        <section class="card card--accent">
          <div class="card__header">
            <div class="flex-1">
              <div class="card__title">{{ icon('share', size=17) }} Lizenzserver-Lizenz</div>
              <div class="card__sub">
                Erzeugt eine neue Vertrauensgrenze -- der Empfänger verwaltet danach eigene Kunden
              </div>
            </div>
          </div>
          <div class="card__body stack">
            {{ alert('Ein so lizenzierter Lizenzserver darf alles, was ein Lizenzserver können
            soll -- ausser selbst weitere Lizenzserver-Lizenzen auszustellen. Er meldet seinen
            Bestand automatisch hierher zurück. Module sind für diese Rolle bedeutungslos und
            werden ignoriert. Self-Service und Kundenportal sind für solche Tickets gesperrt.',
            'warning') }}
            <label class="check">
              <input type="checkbox" name="role" value="license_server">
              <span>Dies ist eine Lizenzserver-Lizenz</span>
            </label>
          </div>
        </section>
      {% endif %}
    </div>

    <section class="card">
      <div class="card__header">
        <div class="flex-1"><div class="card__title">{{ icon('info', size=17) }} Wie es weitergeht</div></div>
      </div>
      <div class="card__body">
        <ol class="stack stack--tight fs-sm muted" style="list-style:decimal;padding-left:1.2em">
          <li>Ticket anlegen (dieser Schritt).</li>
          <li>Auf der Ticketseite eine Lizenz ausstellen -- optional als 30-Tage-Testlizenz mit
            allen Modulen.</li>
          <li>Lizenzdatei herunterladen oder per E-Mail versenden.</li>
          <li>Der Kunde spielt sie ein und aktiviert sie; die Aktivierung bindet sie an seine
            Maschine.</li>
        </ol>
        <div class="divider"></div>
        <p class="fs-sm muted">
          Der Self-Service-Link des Tickets erlaubt dem Kunden, seine Lizenz selbst
          herunterzuladen und bei einem Systemwechsel freizugeben -- ohne Support-Anruf.
        </p>
      </div>
      <div class="card__footer">
        <a class="btn" href="{{ url_for('tickets.overview') }}">Abbrechen</a>
        <button class="btn btn--primary" type="submit">Ticket anlegen</button>
      </div>
    </section>
  </div>
</form>
{% endblock %}

{% block scripts %}
<script type="module" nonce="{{ csp_nonce }}">
  const type = document.getElementById("ticket-type");
  const moduleBox = document.getElementById("module-box");
  const sync = () => {
    const custom = type.value === "custom";
    moduleBox.hidden = !custom;
    moduleBox.querySelectorAll("input").forEach((box) => (box.disabled = !custom));
  };
  type.addEventListener("change", sync);
  sync();
</script>
{% endblock %}