{% extends "base.html" %}
{% block head %}
<style>.buttons .button.is-outlined { color:#000 !important; }</style>
{% endblock %}
{% block content %}
<div class="columns is-centered">
    <div class="column is-half">
        <div class="box">
            <div class="level">
                <div class="level-left">
                    <h1 class="title is-4 has-text-dark">Profil</h1>
                </div>
                <div class="level-right">
                    <a class="button is-light is-small" href="{{ url_for('admin.dashboard') }}">← Dashboard</a>
                </div>
            </div>

            <!-- Avatar -->
            <div class="has-text-centered mb-4">
                {% if current_user.profile_image %}
                <figure class="image is-96x96" style="margin:0 auto;border-radius:50%;overflow:hidden">
                    <img src="{{ url_for('static', filename='avatars/'+current_user.profile_image) }}" alt="Avatar">
                </figure>
                {% else %}
                <div style="width:96px;height:96px;border-radius:50%;background:#2F5496;display:inline-flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:bold;color:#fff">
                    {{ (current_user.vorname[0] if current_user.vorname else '') + (current_user.nachname[0] if current_user.nachname else '') or '?' }}
                </div>
                {% endif %}
                <form method="POST" action="{{ url_for('admin.avatar_upload') }}" enctype="multipart/form-data" class="mt-2">
                    <div class="field has-addons" style="justify-content:center">
                        <div class="control"><input class="input is-small" type="file" name="avatar" accept="image/*"></div>
                        <div class="control"><button class="button is-small is-primary">Hochladen</button></div>
                    </div>
                </form>
                {% if current_user.profile_image %}
                <form method="POST" action="{{ url_for('admin.avatar_entfernen') }}" class="mt-1">
                    <button class="button is-small is-danger is-outlined">Bild entfernen</button>
                </form>
                {% endif %}
            </div>

            <form method="POST">
                <div class="field">
                    <label class="label has-text-dark">E-Mail</label>
                    <div class="control">
                        <input class="input" type="email" value="{{ current_user.email }}" disabled>
                    </div>
                </div>
                <div class="columns">
                    <div class="column">
                        <div class="field">
                            <label class="label has-text-dark">Vorname</label>
                            <div class="control">
                                <input class="input" type="text" name="vorname" value="{{ current_user.vorname or '' }}">
                            </div>
                        </div>
                    </div>
                    <div class="column">
                        <div class="field">
                            <label class="label has-text-dark">Nachname</label>
                            <div class="control">
                                <input class="input" type="text" name="nachname" value="{{ current_user.nachname or '' }}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <label class="label has-text-dark">Neues Passwort (leer lassen für keine Änderung)</label>
                    <div class="control">
                        <input class="input" type="password" name="password" minlength="6">
                    </div>
                </div>

                <hr>
                <h2 class="title is-5 has-text-dark">Einstellungen – Schriftgröße</h2>
                <div class="field">
                    <label class="label has-text-dark">Schriftgröße für die gesamte Anwendung</label>
                    <div class="control">
                        <div class="buttons">
                            <a class="button {{ 'is-info' if session.get('font_size','1') == '0.8' else 'is-outlined' }}"
                               href="{{ url_for('set_font_size', size='0.8') }}">A− Klein</a>
                            <a class="button {{ 'is-info' if session.get('font_size','1') == '1' else 'is-outlined' }}"
                               href="{{ url_for('set_font_size', size='1') }}">A Normal</a>
                            <a class="button {{ 'is-info' if session.get('font_size','1') == '1.1' else 'is-outlined' }}"
                               href="{{ url_for('set_font_size', size='1.1') }}">A+ Größer</a>
                            <a class="button {{ 'is-info' if session.get('font_size','1') == '1.25' else 'is-outlined' }}"
                               href="{{ url_for('set_font_size', size='1.25') }}">A++ Groß</a>
                            <a class="button {{ 'is-info' if session.get('font_size','1') == '1.5' else 'is-outlined' }}"
                               href="{{ url_for('set_font_size', size='1.5') }}">A+++ Sehr groß</a>
                        </div>
                    </div>
                </div>

                <div class="field mt-4">
                    <button class="button is-primary" type="submit">Speichern</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}