{% extends "index.html" %}

<div class="content">
    {% block content %}
        <link rel="stylesheet" href='{% static "css/search-user.css" %}'>

    <div class="content">
        {% if title %}
            <h1>{{ title }}</h1>
        {% endif %}

        {% if db_error %}
            <div class="alert alert-danger">
                <span class="alert-message">{{ db_error }}</span>
            </div>
        {% endif %}

        {% if form.errors %}
            <div class="alert alert-warning">
                <div class="alert-message">
                    <strong>Veuillez corriger les erreurs suivantes :</strong>
                    <ul>
                        {% for field, error in form.errors %}
                            <li><strong>{{ field }} :</strong> {{ error }}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        {% endif %}

        <!-- Formulaire de recherche d'utilisateur -->
        <div class="form-container">
            {% block message %}
                {% messages %}
            {% endblock %}
            <form id="username-form" method="post">
                {% csrf %}
                {% form.user.username %}
                <button type="submit">Rechercher</button>
            </form>
        </div>

        <!-- Affichage des informations de l'utilisateur -->
        <div class="form-container">
            {% if username or email or age %}
            <div class="result-card">
                <h3>Informations Utilisateur</h3>

                <div class="result-line">
                    <span class="result-label">Utilisateur :</span>
                    <span class="result-value">{{ username }}</span>
                </div>

                {% if email %}
                <div class="result-line">
                    <span class="result-label">Email :</span>
                    <span class="result-value">{{ email }}</span>
                </div>
                {% endif %}

                {% if age %}
                <div class="result-line">
                    <span class="result-label">Âge :</span>
                    <span class="result-value">{{ age }} ans</span>
                </div>
                {% endif %}
            </div>
    {% endif %}
        </div>
    </div>
</div>

{% endblock %}
{% block footer %}
    <a href={% link "index" %}>Revenir à l'accueil</a>
    <p>&copy; 2025 My Web Application</p>
{% endblock %}