{% extends "layout.html" %}
{% block content %}
    <section class="container">
        <div class="header-grid mb-2 align-items-center">
            <h1>Tableau de bord Administration</h1>
        </div>
        <div class="grid-auto-fit mb-2">
            <article class="global-score-card">
                <span class="score-value">{{ articles|length }}</span>
                <span class="text-muted">Articles</span>
            </article>
            <article class="global-score-card">
                <span class="score-value">{{ solutions|length }}</span>
                <span class="text-muted">Validations en attente</span>
            </article>
        </div>
        <section class="card-section mb-2">
            <div class="header-grid mb-1">
                <h2 class="mb-0">Articles & Publications</h2>
                <div style="text-align: right;">
                    <a href="{{ url_for("admin.create_article") }}"
                       role="button"
                       class="cta-button">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             width="24"
                             height="24"
                             viewBox="0 0 24 24"
                             fill="none"
                             stroke="currentColor"
                             stroke-width="2"
                             stroke-linecap="round"
                             stroke-linejoin="round"
                             class="icon-add">
                            <line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line>
                        </svg>
                        Nouvel Article
                    </a>
                </div>
            </div>
            {% if articles %}
                <div class="overflow-auto referentiel-table-wrapper">
                    <table class="striped referentiel-table">
                        <thead>
                            <tr>
                                <th scope="col" style="width: 15%;">Date</th>
                                <th scope="col" style="width: 40%;">Titre</th>
                                <th scope="col" style="width: 15%;">Statut</th>
                                <th scope="col" style="width: 30%; text-align: right;">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for article in articles %}
                                <tr>
                                    <td>{{ article.created_at.strftime("%d/%m/%Y") }}</td>
                                    <td>
                                        <strong>{{ article.title }}</strong>
                                    </td>
                                    <td>
                                        {% if article.published %}
                                            <span class="score-badge-home score-high" style="font-size: 0.8rem;">Publié</span>
                                        {% else %}
                                            <span class="score-badge-home score-med" style="font-size: 0.8rem;">Brouillon</span>
                                        {% endif %}
                                    </td>
                                    <td style="text-align: right;">
                                        <div role="group" style="justify-content: flex-end;">
                                            <a href="{{ url_for('admin.edit_article', id=article.id) }}"
                                               role="button"
                                               class="outline secondary cta-button btn-sm">Modifier</a>
                                            <a href="{{ url_for('admin.delete_article', id=article.id) }}"
                                               onclick="return confirm('Supprimer cet article ?')"
                                               class="outline contrast cta-button btn-sm">Supprimer</a>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <article class="text-center text-muted">
                    <p>Aucun article publié pour le moment.</p>
                </article>
            {% endif %}
        </section>
        <hr class="mb-2">
        <section class="card-section">
            <h2 class="mb-1">Validations en attente</h2>
            {% if solutions|length == 0 %}
                <article class="text-center text-muted">
                    <p>Aucune solution en attente de validation.</p>
                </article>
            {% else %}
                <div class="overflow-auto referentiel-table-wrapper">
                    <table class="striped referentiel-table">
                        <thead>
                            <tr>
                                <th style="width: 10%;">Logo</th>
                                <th style="width: 20%;">Nom</th>
                                <th style="width: 30%;">Description</th>
                                <th style="width: 15%;">Site Web</th>
                                <th style="width: 25%; text-align: right;">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for sol in solutions %}
                                <tr>
                                    <td>
                                        {% if sol.logo_filename %}
                                            <img src="{{ url_for('static', filename='uploads/' + sol.logo_filename) }}"
                                                 class="logo-md"
                                                 style="border-radius: 6px">
                                        {% else %}
                                            <div class="logo-md" style="background: #eee; border-radius: 6px;"></div>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <strong>{{ sol.name }}</strong>
                                    </td>
                                    <td>
                                        <small class="text-muted">{{ sol.description[:80] }}...</small>
                                    </td>
                                    <td>
                                        <a href="{{ sol.website }}" target="_blank" class="secondary">Visiter ↗</a>
                                    </td>
                                    <td style="text-align: right;">
                                        <div role="group" style="justify-content: flex-end; gap: 0.5rem;">
                                            <a href="{{ url_for('main.solution_detail', id=sol.id) }}"
                                               role="button"
                                               class="secondary outline cta-button btn-sm">Voir</a>
                                            <a href="{{ url_for('admin.validate_solution', id=sol.id) }}"
                                               role="button"
                                               class="success cta-button btn-sm">Valider</a>
                                            <a href="{{ url_for('admin.delete_solution', id=sol.id) }}"
                                               role="button"
                                               class="contrast outline cta-button btn-sm"
                                               onclick="return confirm('Êtes-vous sûr ?')">Rejeter</a>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </section>
    </section>
{% endblock %}