<!--
   Copyright 2025-2026 AIIrondev

   Licensed under the Inventarsystem EULA (Endbenutzer-Lizenzvertrag).
   See Legal/LICENSE for the full license text.
   Unauthorized commercial use, SaaS hosting, or removal of branding is prohibited.
   For commercial licensing inquiries: https://github.com/AIIrondev
-->
{% extends "base.html" %}

{% block title %}Passwort ändern - Inventarsystem{% endblock %}

{% block content %}
<div class="container">
    <div class="password-change-form">
        <h2>Passwort ändern</h2>
        
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }}">{{ message }}</div>
                {% endfor %}
            {% endif %}
        {% endwith %}
        
        <form method="POST" action="{{ url_for('change_password') }}">
            <div class="form-group">
                <label for="current_password">Aktuelles Passwort:</label>
                <input type="password" id="current_password" name="current_password" required>
            </div>
            
            <div class="form-group">
                <label for="new_password">Neues Passwort:</label>
                <input type="password" id="new_password" name="new_password" required>
                <small class="form-text text-muted">Das Passwort sollte mindestens 6 Zeichen lang sein.</small>
            </div>
            
            <div class="form-group">
                <label for="confirm_password">Neues Passwort bestätigen:</label>
                <input type="password" id="confirm_password" name="confirm_password" required>
            </div>
            
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Passwort ändern</button>
                <a href="{{ url_for('home') }}" class="btn btn-secondary">Abbrechen</a>
            </div>
        </form>
    </div>
</div>

<style>
    .password-change-form {
        max-width: 500px;
        margin: 50px auto;
        padding: 30px;
        background-color: var(--ui-surface-soft);
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    
    h2 {
        text-align: center;
        margin-bottom: 30px;
        color: #343a40;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }
    
    input[type="password"] {
        width: 100%;
        padding: 10px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        font-size: 16px;
    }
    
    .form-text {
        display: block;
        margin-top: 5px;
        font-size: 14px;
    }
    
    .form-actions {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 16px;
        border-radius: 4px;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
    }
    
    .btn-primary {
        background-color: #007bff;
        color: white;
        border: none;
    }
    
    .btn-primary:hover {
        background-color: #0069d9;
    }
    
    .btn-secondary {
        background-color: #6c757d;
        color: white;
        border: none;
    }
    
    .btn-secondary:hover {
        background-color: #5a6268;
    }
    
    .alert {
        padding: 12px;
        margin-bottom: 20px;
        border-radius: 4px;
    }
    
    .alert-error {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
    
    .alert-success {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
</style>
{% endblock %}
