{% extends "layout.html" %}
{% block content %}
    <article>
        <div class="solution-header-grid">
            {% if solution.logo_filename %}
                <div class="logo-lg-container">
                    <img height="100px"
                         width="100px"
                         src="{{ url_for('static', filename='uploads/' + solution.logo_filename) }}"
                         alt="{{ solution.name }}">
                </div>
            {% else %}
                <div class="card-logo-placeholder">{{ solution.name[0] | upper }}</div>
            {% endif %}
            <div class="solution-container">
                <div class="solution-title-container">
                    <div class="solution-title-row">
                        <h1 class="solution-title">{{ solution.name }}</h1>
                        {% if current_user.is_authenticated and current_user.is_admin %}
                            <a href="{{ url_for('admin.edit_solution', id=solution.id) }}"
                               role="button"
                               class="outline contrast secondary btn-edit">Modifier la fiche</a>
                        {% endif %}
                    </div>
                    <p>
                        {% if solution.website %}<a href="{{ solution.website }}" target="_blank">Site Officiel</a>{% endif %}
                    </p>
                </div>
                <p>{{ solution.description }}</p>
                <div class="metadata-container">
                    {% if solution.origin %}
                        <div>
                            <span class="text-xs text-muted uppercase">Origine</span>
                            <div class="font-bold">{{ solution.origin }}</div>
                        </div>
                    {% endif %}
                    {% if solution.license %}
                        <div>
                            <span class="text-xs text-muted uppercase">Licence</span>
                            <div class="font-bold">{{ solution.license }}</div>
                        </div>
                    {% endif %}
                    {% if solution.platforms %}
                        <div>
                            <span class="text-xs text-muted uppercase">Plateformes</span>
                            <div class="font-bold">{{ solution.platforms }}</div>
                        </div>
                    {% endif %}
                </div>
                <div class="tag-container">
                    {% for tag in solution.tags %}<span class="tag">{{ tag.name }}</span>{% endfor %}
                </div>
                <!-- TODO : trouver où mettre ça -->
                <!-- <p>Mis à jour le {{ solution.created_at.strftime('%d/%m/%Y') }}</p> -->
            </div>
            <span class="score-badge-home {% if stats.final >= 70 %}score-high{% elif stats.final >= 40 %}score-med{% else %}score-low{% endif %}">
                {{ stats.final }}
            </span>
        </div>
    </article>
    <div class="grid">
        <article class="chart-article">
            <header>
                <strong>Empreinte de souveraineté</strong>
            </header>
            <div class="radar-chart-wrapper">
                {# radar_svg contient directement le code XML SVG généré par matplotlib #}
                {{ radar_svg | safe }}
            </div>
        </article>
        <article class="chart-article">
            <header>
                <strong>Scores par piliers</strong>
            </header>
            <div class="gap-1 flex-column">
                {% for p_id, p_name in pillars.items() %}
                    <div class="pillar-list-item">
                        <div class="pillar-header-row">
                            <span class="text-lg">
                                <strong>{{ p_id }}</strong> - {{ p_name }}
                            </span>
                            <strong class="score-badge-home {% if stats.pillars[p_id] >= 4 %}score-high{% elif stats.pillars[p_id] >= 2.5 %}score-med{% else %}score-low{% endif %}">
                                {{ stats.pillars[p_id] }}/5
                            </strong>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </article>
    </div>
    <h3 class="mt-2 border-bottom-2 pb-05">Analyse détaillée</h3>
    {% for p_id, p_name in pillars.items() %}
        <details closed>
            <summary role="button" class="contrast outline summary-flex">
                <span class="text-lg"><strong>{{ p_id }}</strong> - {{ p_name }} </span>
                <span class="score-badge-home {% if stats.pillars[p_id] >= 4 %}score-high{% elif stats.pillars[p_id] >= 2.5 %}score-med{% else %}score-low{% endif %}">
                    {{ stats.pillars[p_id] }}/5
                </span>
            </summary>
            {% for c_pillar, c_id, c_title, c_desc, c_choices in criteria %}
                {% if c_pillar == p_id %}
                    {% set score = scores_map.get(c_id) %}
                    {% if score %}
                        <fieldset class="criteria-card mb-2">
                            <legend>
                                <h5>
                                    {{ c_title }} <small class="secondary font-normal text-xs">({{ c_id }})</small>
                                </h5>
                                <small class="text-muted">{{ c_desc }}</small>
                            </legend>
                            <div class="criteria-grid">
                                <div class="h-100">
                                    {% if score.value == 5 %}
                                        <div class="score-card-5 result-card">
                                            <span class="result-header">Excellent</span>
                                            <small>5 / 5</small>
                                        </div>
                                    {% elif score.value == 3 %}
                                        <div class="result-card score-card-3">
                                            <span class="result-header">Satisfaisant</span>
                                            <small>3 / 5</small>
                                        </div>
                                    {% elif score.value == 1 %}
                                        <div class="result-card score-card-1">
                                            <span class="result-header">Insatisfaisant</span>
                                            <small>1 / 5</small>
                                        </div>
                                    {% elif score.value == 0 %}
                                        <div class="result-card score-card-0">
                                            <span class="result-header">Critique</span>
                                            <small>0 / 5</small>
                                        </div>
                                    {% else %}
                                        <div class="result-card score-card-na">
                                            <span class="result-header">Non Concerné</span>
                                            <small>N/A</small>
                                        </div>
                                    {% endif %}
                                </div>
                                <div class="evidence-box">
                                    <div class="evidence-content">
                                        <div>
                                            <span class="evidence-label">Référentiel</span>
                                            <div class="text-m mt-025">
                                                {% if score.value == -1 %}
                                                    <em class="secondary">Critère non applicable à cette solution.</em>
                                                {% else %}
                                                    {{ c_choices[score.value] }}
                                                {% endif %}
                                            </div>
                                        </div>
                                        {% if score.justification or score.source %}
                                            <div class="evidence-row-split">
                                                {% if score.justification %}
                                                    <div>
                                                        <span class="evidence-label">Justification</span>
                                                        <p class="evidence-text mt-025">{{ score.justification }}</p>
                                                    </div>
                                                {% endif %}
                                                {% if score.source %}
                                                    <div>
                                                        <span class="evidence-label">Source</span>
                                                        <div class="evidence-text mt-025">
                                                            <a href="{{ score.source }}" target="_blank" class="source-link">{{ score.source }}</a>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    {% endif %}
                {% endif %}
            {% endfor %}
        </details>
    {% endfor %}
{% endblock %}