{% extends 'workflows/base_shell.html' %}
{% load static i18n %}

{% block title %}{% trans "Einweisung durchführen" %}{% endblock %}



{% block extra_css %}
<link rel="stylesheet" href="{% static 'workflows/css/onboarding_intro_session.css' %}" />
{% endblock %}

{% block shell_body %}
{% include 'workflows/includes/app_header.html' with header_show_dashboard=1 header_show_home=1 header_inside_shell=1 %}

    <div class="hero">
      <h1>{% trans "Einweisung durchführen" %}</h1>
      <p class="sub">{% trans "Einfache Live-Checkliste für das persönliche Onboarding-Gespräch. Punkte abhaken, Notizen ergänzen, als Entwurf speichern oder als abgeschlossen markieren." %}</p>
    </div>

    <div class="content">
      {% if messages %}
        {% for message in messages %}
          <div class="flash">{{ message }}</div>
        {% endfor %}
      {% endif %}

      <div class="meta">
        <div class="card">
          <h2>{% trans "Mitarbeitende Person" %}</h2>
          <div class="meta-grid">
            <strong>{% trans "Name" %}</strong><span>{{ display_name|default:onboarding.full_name }}</span>
            <strong>{% trans "Abteilung" %}</strong><span>{{ onboarding.department|default:"-" }}</span>
            <strong>{% trans "Berufsbezeichnung" %}</strong><span>{{ onboarding.job_title|default:"-" }}</span>
            <strong>{% trans "Dienstliche E-Mail" %}</strong><span>{{ onboarding.work_email|default:"-" }}</span>
            <strong>{% trans "Vertragsbeginn" %}</strong><span>{{ onboarding.contract_start|default:"-" }}</span>
          </div>
        </div>
        <div class="card">
          <h2>{% trans "Sitzungsstatus" %}</h2>
          <div class="meta-grid">
            <strong>{% trans "Status" %}</strong>
            <span><span class="status-pill {% if session.status == 'completed' %}done{% else %}draft{% endif %}">{{ session.get_status_display }}</span></span>
            <strong>{% trans "Abgeschlossen von" %}</strong><span>{{ session.completed_by_name|default:"-" }}</span>
            <strong>{% trans "Abgeschlossen am" %}</strong><span>{% if session.completed_at %}{{ session.completed_at|date:"Y-m-d H:i" }}{% else %}-{% endif %}</span>
            <strong>{% trans "Letzte Änderung" %}</strong><span>{{ session.updated_at|date:"Y-m-d H:i" }}</span>
          </div>
        </div>
      </div>

      <div class="progress-block">
        <div class="progress-top">
          <div>
            <div class="progress-label">{% trans "Fortschritt der Einweisung" %}</div>
            <div class="progress-meta">{% blocktrans trimmed with checked=checked_count total=total_count %}{{ checked }} von {{ total }} Punkten erledigt{% endblocktrans %}</div>
          </div>
          <div class="status-pill {% if session.status == 'completed' %}done{% else %}draft{% endif %}">{{ progress_percent }}%</div>
        </div>
        <div class="progress-bar"><div class="progress-fill" style="width: {{ progress_percent }}%;"></div></div>
      </div>

      <form method="post">
        {% csrf_token %}
        {% for section in sections %}
        <section class="section">
          <div class="section-head">{{ section.title }}</div>
          <div class="items">
            {% for item in section.items %}
            <label class="item">
              <input type="checkbox" name="checked_items" value="{{ item.id }}" {% if item.checked %}checked{% endif %} />
              <span>{{ item.label }}</span>
            </label>
            {% endfor %}
          </div>
        </section>
        {% endfor %}

        <div class="card">
          <h2>{% trans "Notizen" %}</h2>
          <textarea id="notes" name="notes">{{ session.notes }}</textarea>
          <div class="help">{% trans "Diese Seite bleibt bewusst einfach: echte Web-Checkboxen, Notizen und ein klarer Entwurf/Abschluss-Status. Kein zusätzlicher komplexer PDF-Signatur-Workflow." %}</div>
          <div class="actions">
            <button class="btn btn-secondary" type="submit" name="session_action" value="save">{% trans "Als Entwurf speichern" %}</button>
            <button class="btn btn-primary" type="submit" name="session_action" value="complete">{% trans "Als abgeschlossen markieren" %}</button>
            <button class="btn btn-secondary" type="submit" name="session_action" value="reset" data-confirm="{% trans 'Einweisung wirklich zurücksetzen?' %}">{% trans "Alles zurücksetzen" %}</button>
          </div>
        </div>
      </form>

      <div class="card">
        <h2>{% trans "Live-Protokoll" %}</h2>
        <div class="help">{% trans "Erzeugt das Live-Protokoll nur aus den aktuell gespeicherten Haken und Notizen." %}</div>
        <div class="actions">
          <form method="post" action="/requests/onboarding/{{ onboarding.id }}/intro-session/pdf/" style="display:inline;">
            {% csrf_token %}
            <button class="btn btn-secondary" type="submit">{% trans "Live-Protokoll erzeugen" %}</button>
          </form>
          {% if session_pdf_url %}
            <a class="btn btn-secondary" href="{{ session_pdf_url }}" target="_blank" rel="noopener">{% trans "Live-Protokoll öffnen" %}</a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
{% endblock %}