{% extends 'base_dashboard.html' %}

{% block title %}Data Manager — {{ site_settings.institute_name }}{% endblock %}

{% block content %}
<div class="mb-4">
  <div class="text-muted small">Admin · Data</div>
  <h3 class="fw-bold mb-1">Data Manager</h3>
  <p class="text-muted small mb-0">
    Manage every record in the system with an easy interface — add, edit, search, and delete.
    Grouped by module.
  </p>
</div>

{% for group in catalog %}
<div class="mb-4">
  <h6 class="text-uppercase text-muted fw-bold small mb-3">
    <i class="bi {{ group.icon }} me-1"></i>{{ group.app_title }}
  </h6>
  <div class="row g-3">
    {% for m in group.models %}
    <div class="col-sm-6 col-lg-4 col-xl-3">
      <a href="{% url 'dashboard:data_list' m.app_label m.model_name %}"
         class="text-decoration-none">
        <div class="card border-0 shadow-sm h-100 data-tile">
          <div class="card-body d-flex justify-content-between align-items-center">
            <div>
              <div class="fw-semibold text-dark">{{ m.verbose_name_plural }}</div>
              <div class="text-muted small">
                {% if m.count is not None %}{{ m.count }} record{{ m.count|pluralize }}{% else %}Manage{% endif %}
              </div>
            </div>
            <i class="bi bi-chevron-right text-muted"></i>
          </div>
        </div>
      </a>
    </div>
    {% endfor %}
  </div>
</div>
{% endfor %}
{% endblock %}

{% block extra_css %}
<style>
  .data-tile { transition: transform .12s, box-shadow .12s; }
  .data-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,37,87,.10) !important; }
</style>
{% endblock %}