{% extends 'admins/adminbase.html' %}
{% load static %}
{% block contents %}

<div class="container-fluid fade-in">
  <div class="glass-panel p-4">

    <div
      class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom border-secondary border-opacity-25">
      <h4 class="text-white fw-bold m-0"><i class="fas fa-database text-warning me-2"></i> Training Dataset</h4>
      <span class="badge bg-warning bg-opacity-10 text-warning border border-warning border-opacity-25">Raw Data
        View</span>
    </div>

    <div class="table-responsive" style="max-height: 70vh; overflow-y: auto;">
      <!-- The dataset content (likely HTML table generated by pandas) goes here -->
      <div class="dataset-wrapper">
        {{data|safe}}
      </div>
    </div>

    <style>
      /* Overrides for generic Pandas HTML tables */
      .dataset-wrapper table {
        width: 100%;
        border-collapse: collapse;
        color: #e2e8f0;
      }

      .dataset-wrapper th {
        background-color: rgba(255, 255, 255, 0.1);
        padding: 12px;
        text-align: left;
        font-weight: 600;
        border-bottom: 2px solid rgba(255, 255, 255, 0.1);
        white-space: nowrap;
      }

      .dataset-wrapper td {
        padding: 10px;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        font-size: 0.9rem;
      }

      .dataset-wrapper tr:nth-child(even) {
        background-color: rgba(0, 0, 0, 0.2);
      }

      .dataset-wrapper tr:hover {
        background-color: rgba(255, 255, 255, 0.05);
      }
    </style>

  </div>
</div>

{% endblock %}