{% extends 'base.html' %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

  <div class="bg-white shadow-md rounded-lg overflow-hidden">

    <!-- Header -->
    <div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
      <div>
        <h1 class="text-2xl font-bold text-gray-900 flex items-center">
          <i class="fas fa-shield-alt mr-3 text-red-500"></i>
          NetScan
        </h1>
        <p class="text-sm text-gray-500 mt-0.5">Home network security scanner</p>
      </div>
      <a href="{% url 'netscan-profile-create' %}"
         class="inline-flex items-center px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
        <i class="fas fa-plus mr-2"></i>
        New Profile
      </a>
    </div>

    {% if not profile_data %}
    <!-- Empty state -->
    <div class="text-center py-20">
      <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
        <i class="fas fa-shield-alt text-red-500 text-2xl"></i>
      </div>
      <h2 class="text-lg font-semibold text-gray-700 mb-2">No scan profiles yet</h2>
      <p class="text-gray-500 text-sm mb-6">Create your first scan profile to start monitoring your home network.</p>
      <a href="{% url 'netscan-profile-create' %}"
         class="inline-flex items-center px-5 py-2.5 bg-red-600 text-white text-sm font-medium rounded-md hover:bg-red-700">
        <i class="fas fa-plus mr-2"></i>
        Create your first scan profile
      </a>
    </div>

    {% else %}
    <!-- Profiles table -->
    <table class="min-w-full text-sm">
      <thead class="bg-gray-50 border-b border-gray-100">
        <tr>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide">Profile</th>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide hidden sm:table-cell">Network</th>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide hidden md:table-cell">Last Run</th>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide hidden sm:table-cell">Findings</th>
          <th class="px-4 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wide">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-100">
        {% for item in profile_data %}
        {% with p=item.profile run=item.last_run worst=item.worst_severity %}
        <tr class="hover:bg-gray-50 transition-colors">

          <!-- Profile name + badges -->
          <td class="px-4 py-4">
            <div class="font-semibold text-gray-900 flex items-center gap-2">
              {% if worst %}
                {% if worst == 'critical' %}🔴{% elif worst == 'warning' %}🟡{% else %}🟢{% endif %}
              {% endif %}
              {{ p.name }}
            </div>
            <div class="flex flex-wrap gap-1 mt-1">
              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
                {% if p.enabled %}bg-green-100 text-green-700{% else %}bg-gray-100 text-gray-500{% endif %}">
                {% if p.enabled %}Enabled{% else %}Disabled{% endif %}
              </span>
              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-50 text-blue-600">
                Every {{ p.schedule_interval }} day{{ p.schedule_interval|pluralize }}
              </span>
            </div>
          </td>

          <!-- Network info -->
          <td class="px-4 py-4 hidden sm:table-cell">
            <div class="text-gray-700 font-mono text-xs">{{ p.gateway_ip }}</div>
            <div class="text-gray-400 font-mono text-xs">{{ p.public_ip }}</div>
          </td>

          <!-- Last run -->
          <td class="px-4 py-4 hidden md:table-cell text-gray-500 text-xs">
            {% if p.last_run_at %}{{ p.last_run_at|date:"M d, H:i" }}{% else %}<span class="text-gray-400">Never</span>{% endif %}
          </td>

          <!-- Findings -->
          <td class="px-4 py-4 hidden sm:table-cell">
            {% if run %}
            <div class="flex items-center gap-2">
              {% if run.summary.critical %}<span class="text-red-600 font-medium text-xs">🔴{{ run.summary.critical }}</span>{% endif %}
              {% if run.summary.warning %}<span class="text-yellow-600 font-medium text-xs">🟡{{ run.summary.warning }}</span>{% endif %}
              {% if run.summary.ok %}<span class="text-green-600 font-medium text-xs">🟢{{ run.summary.ok }}</span>{% endif %}
            </div>
            {% else %}
            <span class="text-gray-300 text-xs">—</span>
            {% endif %}
          </td>

          <!-- Actions -->
          <td class="px-4 py-4 text-right">
            <div class="flex items-center justify-end gap-2">
              <form method="post" action="{% url 'netscan-trigger' p.pk %}">
                {% csrf_token %}
                <button type="submit"
                        class="inline-flex items-center px-3 py-1.5 bg-red-600 text-white text-xs rounded-md hover:bg-red-700 font-medium">
                  <i class="fas fa-play mr-1.5"></i> Run
                </button>
              </form>
              <a href="{% url 'netscan-run-list' p.pk %}"
                 class="inline-flex items-center px-3 py-1.5 bg-gray-100 text-gray-700 text-xs rounded-md hover:bg-gray-200">
                <i class="fas fa-history mr-1.5"></i> History
              </a>
              <a href="{% url 'netscan-profile-edit' p.pk %}"
                 class="inline-flex items-center px-3 py-1.5 bg-gray-100 text-gray-700 text-xs rounded-md hover:bg-gray-200">
                <i class="fas fa-edit mr-1.5"></i> Edit
              </a>
              <a href="{% url 'netscan-profile-delete' p.pk %}"
                 class="inline-flex items-center px-2 py-1.5 bg-red-50 text-red-500 text-xs rounded-md hover:bg-red-100">
                <i class="fas fa-trash"></i>
              </a>
            </div>
          </td>

        </tr>
        {% endwith %}
        {% endfor %}
      </tbody>
    </table>
    {% endif %}

  </div>
</div>
{% endblock %}