{% extends shell_base %}

{% block title %}Profil · CheckPoint Ehrenamt{% endblock %}

{% block content %}
  <h1>Profil</h1>

  <div class="cp-card">
    {% if current_user.profilbild_pfad %}
      <img class="cp-profilbild" src="{{ url_for('profil.bild', user_id=current_user.id) }}"
           alt="Profilbild von {{ current_user.anzeigename }}">
    {% else %}
      <div class="cp-profilbild cp-profilbild--leer" aria-hidden="true">
        {%- set teile = current_user.anzeigename.split() -%}
        {{ (teile[0][:1] ~ (teile[1][:1] if teile|length > 1 else ''))|upper }}
      </div>
    {% endif %}
    <strong>{{ current_user.anzeigename }}</strong>
    <div class="cp-muted">{{ "Admin" if current_user.ist_admin else "Ehrenamtlich" }}
      · {{ current_user.nutzername }}</div>
  </div>

  <form method="post" action="{{ url_for('profil.index') }}"
        enctype="multipart/form-data" class="cp-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

    <div class="cp-field">
      <label for="anzeigename">Anzeigename</label>
      <input type="text" id="anzeigename" name="anzeigename" required
             value="{{ current_user.anzeigename }}">
    </div>

    <div class="cp-field">
      <label for="profilbild">Profilbild <span class="cp-muted">(optional)</span></label>
      <input type="file" id="profilbild" name="profilbild"
             accept=".png,.jpg,.jpeg,.gif,.webp">
      <div class="cp-muted">PNG, JPG, GIF oder WebP. Ersetzt das bisherige Bild.</div>
    </div>

    {% for feld in felder %}
      <div class="cp-field">
        <label for="{{ feld.key }}">{{ feld.label }} <span class="cp-muted">(optional)</span></label>
        {% if feld.mehrzeilig %}
          <textarea id="{{ feld.key }}" name="{{ feld.key }}" rows="3"
                    placeholder="{{ feld.placeholder }}">{{ angaben.get(feld.key, '') }}</textarea>
        {% else %}
          <input type="text" id="{{ feld.key }}" name="{{ feld.key }}"
                 placeholder="{{ feld.placeholder }}" value="{{ angaben.get(feld.key, '') }}">
        {% endif %}
      </div>
    {% endfor %}

    <button type="submit" class="cp-btn cp-btn--primary">Speichern</button>
  </form>
{% endblock %}