{% extends "tesm_core/base.html" %}
{% from "tesm_core/macros.html" import field, textarea_field, pill, search_box, modal,
        empty_state %}

{% macro customer_form(customer=None) %}
  <div class="form-grid">
    {{ field('name', 'Firmenname', value=customer.name if customer else '', required=True) }}
    {{ field('contact_email', 'E-Mail', value=customer.contact_email if customer else '',
             type='email', required=not customer,
             hint_text='Pflicht bei der Neuanlage -- über diese Adresse läuft das Kundenportal.') }}
    {{ field('contact_person', 'Ansprechpartner', value=customer.contact_person if customer else '') }}
    {{ field('contact_phone', 'Telefon', value=customer.contact_phone if customer else '') }}
    {{ field('street', 'Strasse', value=customer.street if customer else '') }}
    {{ field('house_number', 'Hausnummer', value=customer.house_number if customer else '') }}
    {{ field('postal_code', 'PLZ', value=customer.postal_code if customer else '') }}
    {{ field('city', 'Ort', value=customer.city if customer else '') }}
    {{ textarea_field('notes', 'Notizen', value=customer.notes if customer else '', rows=2,
                      extra_class='field--full') }}
  </div>
{% endmacro %}

{% block page_title %}Kunden{% endblock %}
{% block page_sub %}{{ customers | length }} Kunden{% endblock %}

{% block topbar_extra %}
  {{ search_box('customers-table', 'Firma, Ort, Ansprechpartner ...') }}
  {% if current_user.has('customers.create') %}
    <button class="btn btn--primary btn--sm" type="button" data-dialog-open="customer-new">
      {{ icon('plus', size=15) }} Kunde anlegen
    </button>
  {% endif %}
{% endblock %}

{% block content %}
<section class="card">
  <div class="table-wrap">
    <table class="table" id="customers-table" data-behavior="sortable">
      <thead>
        <tr>
          <th class="sortable">Firma</th>
          <th class="sortable">Ansprechpartner</th>
          <th class="sortable">E-Mail</th>
          <th class="sortable">Ort</th>
          <th class="sortable numeric">Tickets</th>
          <th class="sortable numeric">Offene Lizenzen</th>
        </tr>
      </thead>
      <tbody>
        {% for customer in customers %}
          <tr data-filter-text="{{ customer.name }} {{ customer.city }} {{ customer.contact_person }} {{ customer.contact_email }}">
            <td>
              <a class="fw-600" href="{{ url_for('customers.detail', customer_id=customer.id) }}">
                {{ customer.name }}
              </a>
              {% if customer.license_server_id %}{{ pill('Lizenzserver', 'accent') }}{% endif %}
            </td>
            <td class="fs-sm">{{ customer.contact_person or '&ndash;' | safe }}</td>
            <td class="fs-sm">{{ customer.contact_email or '&ndash;' | safe }}</td>
            <td class="fs-sm">{{ customer.city or '&ndash;' | safe }}</td>
            <td class="numeric">{{ customer.ticket_count }}</td>
            <td class="numeric">{{ customer.open_licenses }}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% if not customers %}
    {{ empty_state('Keine Kunden', 'Legen Sie den ersten Kunden an.', 'building') }}
  {% endif %}
</section>
{% endblock %}

{% block dialogs %}
{% if current_user.has('customers.create') %}
  {% call modal('customer-new', 'Kunde anlegen', 'Adresse in Einzelfeldern -- für Rechnungen weiterverwendbar', 'wide') %}
    <form method="post" action="{{ url_for('customers.create') }}">
      <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
      <div class="modal__body">{{ customer_form() }}</div>
      <div class="modal__footer">
        <button class="btn" type="button" data-dialog-close>Abbrechen</button>
        <button class="btn btn--primary" type="submit">Anlegen</button>
      </div>
    </form>
  {% endcall %}
{% endif %}
{% endblock %}