{% extends "base/base.html" %}
{# Migrated from resources/views/einstellungen.blade.php #}

{% block content %}

<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Einstellungen</h1>
</div>

<div class="row">
    <!-- Password change card -->
    <div class="col-lg-6">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Passwort ändern</h6>
            </div>
            <div class="card-body">

                {% if errors %}
                {% for field, msg in errors.items %}
                <div class="alert alert-danger">{{ msg }}</div>
                {% endfor %}
                {% endif %}

                <form action="{% url 'app_nutzer:change_password' %}" method="POST">
                    {% csrf_token %}
                    <div class="form-group">
                        <label>Aktuelles Passwort</label>
                        <div class="input-group">
                            <input type="password" class="form-control" name="current_password"
                                   id="id_current_password" placeholder="Aktuelles Passwort">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button"
                                        onclick="togglePassword('id_current_password', this)"
                                        title="Passwort anzeigen">
                                    <i class="fa fa-eye"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Neues Passwort</label>
                        <div class="input-group">
                            <input type="password" class="form-control" name="new_password"
                                   id="id_new_password" placeholder="Neues Passwort">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button"
                                        onclick="togglePassword('id_new_password', this)"
                                        title="Passwort anzeigen">
                                    <i class="fa fa-eye"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Neues Passwort wiederholen</label>
                        <div class="input-group">
                            <input type="password" class="form-control" name="new_password_confirmation"
                                   id="id_new_password_confirmation" placeholder="Neues Passwort wiederholen">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button"
                                        onclick="togglePassword('id_new_password_confirmation', this)"
                                        title="Passwort anzeigen">
                                    <i class="fa fa-eye"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-xds-red">Passwort ändern</button>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock content %}

{% block extra_scripts %}
<script>
function togglePassword(inputId, btn) {
    var input = document.getElementById(inputId);
    var icon = btn.querySelector('i');
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.replace('fa-eye', 'fa-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.replace('fa-eye-slash', 'fa-eye');
    }
}
</script>
{% endblock extra_scripts %}