{% extends "base.html" %}
{% from 'macros/help.html' import help_icon %}
{% block title %}Nový uživatel — MedCover{% endblock %}

{% block content %}
<div class="mb-3 d-flex justify-content-between align-items-center">
  <h2 class="mb-0">Nový uživatel</h2>
  <a href="{{ url_for('users.index') }}" class="btn btn-sm btn-outline-secondary">← Zpět na uživatele</a>
</div>

<form method="POST" action="{{ url_for('users.create_user') }}" novalidate>
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

  <div class="row g-4">
    {# ── Left column: basic info ── #}
    <div class="col-12 col-lg-5">

      <div class="card mb-4">
        <div class="card-header fw-semibold">Základní údaje</div>
        <div class="card-body">
          <div class="mb-3">
            <label class="form-label" for="create_name">Celé jméno <small class="text-muted fw-normal">(Příjmení Jméno)</small>
              {{ help_icon("Zadejte nejdříve příjmení, pak jméno — např. Novák Jan.") }}
            </label>
            <input class="form-control" type="text" id="create_name" name="name"
                   value="{{ request.form.get('name', '') }}" placeholder="Novák Jan" required>
            <div class="invalid-feedback">Jméno nesmí být prázdné.</div>
          </div>
          <div class="mb-3">
            <label class="form-label" for="create_email">E-mail
              {{ help_icon("Přihlašovací e-mail uživatele. Musí být unikátní v celém systému.") }}
            </label>
            <input class="form-control" type="email" id="create_email" name="email"
                   value="{{ request.form.get('email', '') }}" required>
            <div class="invalid-feedback">Zadejte platný e-mail (např. novak@example.cz).</div>
          </div>
          <div class="mb-3">
            <label class="form-label" for="create_phone">Telefon
              {{ help_icon("Nepovinné. Povolené formáty: +420 123 456 789, 00420 123 456 789, 123 456 789 (mezery jsou volitelné).") }}
            </label>
            <input class="form-control" type="tel" id="create_phone" name="phone"
                   value="{{ request.form.get('phone', '') }}">
            <div class="invalid-feedback">Neplatný formát. Povolené formáty: +420 123 456 789, 00420 123 456 789, 123 456 789 (mezery jsou volitelné).</div>
          </div>
          <div class="alert alert-info small mb-0">
            Účet bude vytvořen bez hesla. Uživatel si heslo nastaví přes <strong>Zapomenuté heslo</strong> na přihlašovací stránce.
          </div>
        </div>
      </div>

    </div>

    {# ── Right column: roles + qualifications ── #}
    <div class="col-12 col-lg-7">

      {% if current_user.has_permission('user.assign_role') %}
      <div class="card mb-4">
        <div class="card-header fw-semibold">Role
          {{ help_icon("Role určují, co uživatel v systému smí dělat.") }}
        </div>
        <div class="card-body">
          <div class="d-flex flex-wrap gap-2">
            {% for role in all_roles %}
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="role_ids"
                     value="{{ role.id }}" id="role_{{ role.id }}">
              <label class="form-check-label" for="role_{{ role.id }}">{{ role.name }}</label>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
      {% endif %}

      {% if current_user.has_permission('user.assign_qualification') %}
      <div class="card mb-4">
        <div class="card-header fw-semibold">Kvalifikace
          {{ help_icon("Kvalifikace určují, na jaké pozice může uživatel nastoupit.") }}
        </div>
        <div class="card-body">
          <div class="row g-2">
            {% for cred in all_qualifications %}
            <div class="col-12 col-md-6">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" name="qualification_ids"
                       value="{{ cred.id }}" id="cred_{{ cred.id }}">
                <label class="form-check-label" for="cred_{{ cred.id }}">{{ cred.name }}</label>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
      {% endif %}

    </div>
  </div>

  <div class="d-flex gap-2 mt-2">
    <button type="submit" class="btn btn-danger">Vytvořit uživatele</button>
    <a href="{{ url_for('users.index') }}" class="btn btn-outline-secondary">Zrušit</a>
  </div>

</form>
{% endblock %}

{% block extra_scripts %}
<script src="{{ url_for('static', filename='js/user-form.js') }}?v={{ static_ver }}"></script>
{% endblock %}