{% extends "base.html" %}

{% block title %}{{ _('Harris Matrix') }} - {{ site_name }}{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="fas fa-chart-bar"></i> {{ _('Harris Matrix') }} - {{ site_name }}</h2>
        <div>
            <a href="{{ url_for('harris_matrix_graphviz', site_name=site_name, grouping='period_area') }}" class="btn btn-success">
                <i class="fas fa-project-diagram"></i> Graphviz (Desktop GUI)
            </a>
            <a href="{{ url_for('sites_list') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> {{ _('Back') }}
            </a>
        </div>
    </div>

    <!-- Visualizer Info -->
    <div class="alert alert-info mb-4">
        <i class="fas fa-info-circle"></i>
        <strong>{{ _('Matplotlib Visualizer (Simple)') }}</strong> -
        {{ _('For advanced visualization with groupings and desktop GUI style,') }}
        <a href="{{ url_for('harris_matrix_graphviz', site_name=site_name, grouping='period_area') }}" class="alert-link">
            {{ _('switch to Graphviz') }} <i class="fas fa-arrow-right"></i>
        </a>
    </div>

    <!-- Matrix Statistics -->
    {% if stats %}
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <h5>{{ stats.total_nodes }}</h5>
                    <p class="text-muted mb-0">{{ _('Stratigraphic Units') }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <h5>{{ stats.total_edges }}</h5>
                    <p class="text-muted mb-0">{{ _('Relationships') }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <h5>{{ stats.max_depth }}</h5>
                    <p class="text-muted mb-0">{{ _('Maximum Depth') }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <h5>{{ levels|length }}</h5>
                    <p class="text-muted mb-0">{{ _('Levels') }}</p>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Matrix Visualization -->
    <div class="card">
        <div class="card-header">
            <h5>{{ _('Matrix Visualization') }}</h5>
        </div>
        <div class="card-body text-center">
            {% if matrix_image %}
            <img src="data:image/png;base64,{{ matrix_image }}" class="img-fluid" alt="{{ _('Harris Matrix') }}">
            {% else %}
            <p class="text-muted">{{ _('No matrix available for this site.') }}</p>
            {% endif %}
        </div>
    </div>

    <!-- Matrix Levels -->
    {% if levels %}
    <div class="card mt-4">
        <div class="card-header">
            <h5>{{ _('Stratigraphic Sequence') }}</h5>
        </div>
        <div class="card-body">
            <ol>
                {% for level_num, us_list in levels.items()|sort %}
                <li><strong>{{ _('Level') }} {{ level_num }}:</strong> US {{ us_list|join(', US ') }}</li>
                {% endfor %}
            </ol>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}