{% extends "tesm_core/standalone.html" %}
{% from "tesm_core/macros.html" import field, pill %}

{% block card_class %}auth-card--wide{% endblock %}
{% block heading %}{{ customer.name }}{% endblock %}
{% block subheading %}Ihre Lizenzen und Stammdaten{% endblock %}

{% block content %}
<div class="alert alert--info">
  {{ icon('clock', size=18) }}
  <div class="alert__body">
    Diese Sitzung endet
    <span data-relative-time="{{ expires_at }}">{{ expires_at | dt }}</span>. Danach fordern Sie
    einfach einen neuen Zugangslink an.
  </div>
</div>

<section class="card">
  <div class="card__header">
    <div class="flex-1">
      <div class="card__title">{{ icon('shield', size=17) }} Ihre Lizenzen</div>
      <div class="card__sub">{{ tickets | length }} Vertrag/Verträge</div>
    </div>
  </div>
  <div class="card__body stack stack--tight">
    {% for ticket in tickets %}
      {% set entry = licenses.get(ticket.id) %}
      <div class="card" style="padding:var(--sp-4)">
        <div class="row row--between">
          <div>
            <div class="fw-600">{{ ticket.type | capitalize }}</div>
            <div class="fs-xs faint">
              {% if ticket.lifetime %}unbefristet{% else %}{{ ticket.valid_days }} Tage Laufzeit{% endif %}
            </div>
          </div>
          {% if ticket.status == 'blocked' %}
            {{ pill('gesperrt', 'danger') }}
          {% elif entry %}
            {% if entry.lifetime %}{{ pill('unbefristet', 'online') }}
            {% elif entry.is_expired %}{{ pill('abgelaufen', 'danger') }}
            {% elif entry.color == 'red' %}{{ pill('noch ' ~ entry.days_left ~ ' Tage', 'danger') }}
            {% elif entry.color == 'orange' %}{{ pill('noch ' ~ entry.days_left ~ ' Tage', 'warning') }}
            {% else %}{{ pill('noch ' ~ entry.days_left ~ ' Tage', 'online') }}{% endif %}
          {% else %}
            {{ pill('keine Lizenz', 'warning') }}
          {% endif %}
        </div>
        {% if self_service_enabled and ticket.role == 'customer' %}
          <a class="btn btn--sm mt-3" href="{{ url_for('selfservice.overview', ticket_id=ticket.id) }}">
            Lizenz verwalten
          </a>
        {% endif %}
      </div>
    {% else %}
      <p class="muted fs-sm">Zu Ihrem Konto ist noch kein Vertrag hinterlegt.</p>
    {% endfor %}
  </div>
</section>

<section class="card">
  <div class="card__header">
    <div class="flex-1"><div class="card__title">{{ icon('building', size=17) }} Ihre Angaben</div></div>
  </div>
  <form method="post">
    <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
    <div class="card__body stack">
      <div class="form-grid">
        {{ field('contact_person', 'Ansprechpartner', value=customer.contact_person) }}
        {{ field('contact_phone', 'Telefon', value=customer.contact_phone) }}
        {{ field('contact_email', 'E-Mail', value=customer.contact_email, type='email',
                 hint_text='Über diese Adresse läuft der Zugang zu diesem Portal.') }}
        {{ field('street', 'Strasse', value=customer.street) }}
        {{ field('house_number', 'Hausnummer', value=customer.house_number) }}
        {{ field('postal_code', 'PLZ', value=customer.postal_code) }}
        {{ field('city', 'Ort', value=customer.city) }}
      </div>
    </div>
    <div class="card__footer">
      <button class="btn btn--primary" type="submit">Speichern</button>
    </div>
  </form>
</section>

<form method="post" action="{{ url_for('portal.logout') }}" data-no-guard>
  <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
  <button class="btn btn--block" type="submit">Abmelden</button>
</form>

{% if vendor.name %}
  <p class="auth-footnote">
    Fragen? {{ vendor.name }}
    {% if vendor.phone %} &middot; {{ vendor.phone }}{% endif %}
    {% if vendor.email %} &middot; {{ vendor.email }}{% endif %}
  </p>
{% endif %}
{% endblock %}