{% extends "base.html" %}

{% block title %}Protocols - {{ title }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h1 class="card-title mb-4">
                    <i class="bi bi-diagram-3"></i> Discovered Protocols
                </h1>

                {% if protocols %}
                <div class="row">
                    {% for protocol in protocols %}
                    <div class="col-md-6 col-lg-4 mb-4">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title">{{ protocol.protocol_name }}</h5>
                                <p class="text-muted small">{{ protocol.filename }}</p>

                                <div class="mb-2">
                                    <strong>Confidence:</strong>
                                    <div class="progress" style="height: 20px;">
                                        <div class="progress-bar" role="progressbar"
                                             style="width: {{ (protocol.confidence * 100)|round }}%"
                                             aria-valuenow="{{ (protocol.confidence * 100)|round }}"
                                             aria-valuemin="0" aria-valuemax="100">
                                            {{ (protocol.confidence * 100)|round(1) }}%
                                        </div>
                                    </div>
                                </div>

                                <p class="mb-1"><strong>Messages:</strong> {{ protocol.message_count }}</p>
                                <p class="mb-3"><strong>Fields:</strong> {{ protocol.field_count }}</p>

                                <a href="/session/{{ protocol.session_id }}" class="btn btn-primary btn-sm">
                                    <i class="bi bi-eye"></i> View Details
                                </a>
                            </div>
                            <div class="card-footer text-muted small">
                                {{ protocol.created_at[:19] }}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i> No protocols discovered yet. <a href="/">Upload a file</a> to analyze.
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
