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

{% block title %}{% trans "Offboarding-Anfrage" %}{% endblock %}

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

{% block pre_shell %}
<div id="saved-popup" class="popup-backdrop {% if saved %}show{% endif %}">
    <div class="popup">
      <h3>{% trans "Anfrage gespeichert" %}</h3>
      <p>{% blocktrans trimmed with request_id=saved_request_id %}Offboarding wurde erfolgreich gespeichert (ID: {{ request_id }}). Das PDF wird im Hintergrund erzeugt.{% endblocktrans %}</p>
      <button class="btn btn-secondary" type="button" onclick="document.getElementById('saved-popup').classList.remove('show')">{% trans "Schließen" %}</button>
    </div>
  </div>
{% endblock %}

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

    <div class="app-workspace workflow-workspace">
      <aside class="app-sidebar">
        <div class="app-sidebar-card workflow-sidebar-card">
        <h1>{% trans "Offboarding" %}</h1>
        <p class="offboarding-sub">{% trans "Strukturierte Austrittsanfrage mit denselben klaren Oberflächenmustern wie im Onboarding." %}</p>
        <ol class="app-flow-list">
          {% for section in offboarding_sections %}
          <li class="app-flow-item">
            <span class="app-flow-dot">{{ forloop.counter }}</span>
            <div>
              <div class="app-flow-title">{{ section.title }}</div>
              <div class="app-flow-sub">{{ section.subtitle }}</div>
            </div>
          </li>
          {% endfor %}
        </ol>
        </div>
      </aside>

      <main class="workflow-form-main offboarding-main">
      <section class="offboarding-search-card">
        <div class="offboarding-section-head offboarding-search-head">
          <div>
            <h2>{% trans "Mitarbeitende suchen" %}</h2>
            <p>{% trans "Vorhandene Profildaten laden, bevor die Austrittsangaben erfasst werden." %}</p>
          </div>
        </div>
        <form method="get" action="/offboarding/new/">
          <div class="field">
            <label for="q">{% trans "Mitarbeitende suchen (Name oder E-Mail)" %}</label>
            <input id="q" name="q" value="{{ search_query }}" placeholder="{% blocktrans trimmed with domain=portal_email_domain %}z. B. max.mustermann@{{ domain }}{% endblocktrans %}" />
          </div>
          <button class="btn btn-primary" type="submit">{% trans "Suchen" %}</button>
        </form>

        {% if search_results %}
        <div class="results">
          {% for p in search_results %}
          <a href="/offboarding/new/?profile={{ p.id }}">{{ p.full_name }} ({{ p.work_email }})</a>
          {% endfor %}
        </div>
        {% endif %}

        {% if selected_profile %}
        <p class="offboarding-prefill-note">{% trans "Vorbefüllt aus:" %} <strong>{{ selected_profile.full_name }}</strong> ({{ selected_profile.work_email }})</p>
        {% endif %}
      </section>

      <form method="post" data-email-domain="{{ portal_email_domain }}">
        {% csrf_token %}
        <div class="offboarding-sections">
          {% for section in offboarding_sections %}
          <section class="offboarding-section-card">
            <div class="offboarding-section-head">
              <div>
                <h2>{{ section.title }}</h2>
                <p>{{ section.subtitle }}</p>
              </div>
            </div>
            <div class="grid">
              {% for field in section.fields %}
              {% if field.field.widget.input_type == 'checkbox' %}
              <div class="field inline-check field-full">
                {{ field }} {{ field.label_tag }}
                {% if field.help_text %}<div class="hint">{{ field.help_text }}</div>{% endif %}
                {{ field.errors }}
              </div>
              {% else %}
              <div class="field {% if field.name == 'notes' %}field-full{% endif %}">
                {{ field.label_tag }}
                {{ field }}
                {% if field.help_text %}<div class="hint">{{ field.help_text }}</div>{% endif %}
                {{ field.errors }}
              </div>
              {% endif %}
              {% endfor %}
            </div>
          </section>
          {% endfor %}
        </div>
        <button class="btn btn-primary" type="submit">{% trans "Offboarding-Anfrage speichern" %}</button>
      </form>
      </main>
    </div>
{% endblock %}

{% block extra_scripts %}
<script src="{% static 'workflows/js/offboarding_form.js' %}"></script>
{% endblock %}