{% extends "layout.html" %}
{% block content %}
    <div class="hero-section">
        <h1 class="hero-title">Indice d'Autonomie Stratégique</h1>
        <p class="hero-subtitle mb-1">
            Ce site est collaboratif et gratuit, nous auditons des applications et services pour vos besoins d'autonomie stratégique.
            <br>
            <a href="{{ url_for("auth.register") }}">Inscrivez-vous</a> et aidez la communauté en auditant une solution !
        </p>
        <div class="search-container">
            <form action="{{ url_for('main.home') }}" method="get">
                {% if request.args.get('tag') %}
                    <input type="hidden" name="tag" value="{{ request.args.get('tag') }}">
                {% endif %}
                <input class="search-bar"
                       type="search"
                       name="search"
                       id="search"
                       placeholder="Rechercher une solution..."
                       autocomplete="off"
                       value="{{ request.args.get('search', '') }}">
            </form>
        </div>
        <div class="filters-section">
            <h4 class="outline contrast">Filtrer par tags</h4>
            <div id="tags-filter-list" class="tags-filter-list">
                <a href="{{ url_for('main.home') }}" 
                   class="filter-tag {% if not request.args.get('tag') %}active{% endif %}" 
                   role="button">Tous</a>
                {% for tag in tags %}
                <a href="{{ url_for('main.home', tag=tag.name, search=request.args.get('search', '')) }}" 
                   class="filter-tag {% if request.args.get('tag') == tag.name %}active{% endif %}" 
                   role="button">{{ tag.name }}</a>
                {% endfor %}
            </div>
            <div class="results-count" aria-live="polite">
                <p class="text-sm">
                    <strong>{{ solutions|length }}</strong> solution(s) trouvée(s)
                    {% if request.args.get('tag') %} pour le tag "{{ request.args.get('tag') }}"{% endif %}
                </p>
            </div>
        </div>
        <div class="solutions-grid" id="solutions-list">
        {% for sol in solutions %}
            {% set scores = sol.calculate_scores() %}
            <a href="{{ url_for('main.solution_detail', id=sol.id) }}"
               class="card-link">
                <article class="solution-card">
                    <div class="solution-content">
                        {% if sol.logo_filename %}
                            <img width="100px"
                                 height="100px"
                                 src="{{ url_for('static', filename='uploads/' + sol.logo_filename) }}"
                                 alt="{{ sol.name }}"
                                 class="card-logo">
                        {% else %}
                            <div class="card-logo-placeholder">{{ sol.name[0] | upper }}</div>
                        {% endif %}
                        <div class="card-content">
                            <div class="card-header-row"">
                                <div>
                                    <h3 class="card-title">{{ sol.name }}</h3>
                                </div>
                                <span class="score-badge-home {% if scores.final >= 70 %}score-high{% elif scores.final >= 40 %}score-med{% else %}score-low{% endif %}">
                                    {{ scores.final }}
                                </span>
                            </div>
                            <p class="text-align-left text-muted mb-1">{{ sol.description[:200:] }}...</p>
                            <div class="tag-container">
                                {% if sol.origin %}<span class="tag" title="Origine">{{ sol.origin }}</span>{% endif %}
                                {% if sol.license %}<span class="tag" title="Licence">{{ sol.license }}</span>{% endif %}
                                {% if sol.tags %}
                                    {% for tag in sol.tags %}<span class="tag">{{ tag.name }}</span>{% endfor %}
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </article>
            </a>
        {% else %}
            <p class="text-center w-100 text-muted">Aucune solution référencée pour le moment.</p>
        {% endfor %}
    </div>
    <div class="cta-section">
        <h2 class="cta-title">Une solution manquante ?</h2>
        <p class="cta-description">
            Contribuez à l'Indice d'Autonomie Stratégique en ajoutant une solution au catalogue.
        </p>
        <a href="{{ url_for("main.submit_solution") }}"
           role="button"
           class="contrast cta-button">Proposer une solution</a>
    </div>
{% endblock %}