{% 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 %}