{% extends "data_hub/base_data_hub.html" %}
{% block data_hub_content %}
<h4 class="mb-4"><i class="fas fa-chart-bar me-2 text-success"></i>Data Hub Dashboard</h4>
<div class="row g-3 mb-4">
  <div class="col-md-3"><div class="card border-0 shadow-sm text-center py-3">
    <div class="text-muted small">Total Recipes</div>
    <div class="fs-3 fw-bold">{{ total_recipes }}</div>
  </div></div>
  <div class="col-md-3"><div class="card border-0 shadow-sm text-center py-3">
    <div class="text-muted small">Ingredients</div>
    <div class="fs-3 fw-bold">{{ total_ingredients }}</div>
  </div></div>
  <div class="col-md-3"><div class="card border-0 shadow-sm text-center py-3">
    <div class="text-muted small">Aliases</div>
    <div class="fs-3 fw-bold">{{ total_aliases }}</div>
  </div></div>
  <div class="col-md-3"><div class="card border-0 shadow-sm text-center py-3 {% if flag_count > 0 %}border-danger{% endif %}">
    <div class="text-muted small">Pending Flags</div>
    <div class="fs-3 fw-bold {% if flag_count > 0 %}text-danger{% endif %}">{{ flag_count }}</div>
  </div></div>
</div>
{% if top_unmatched %}
<div class="card border-0 shadow-sm">
  <div class="card-header bg-white fw-semibold">Top Unmatched Ingredient Strings</div>
  <div class="card-body p-0">
    <table class="table table-sm mb-0">
      <thead class="table-light"><tr><th class="px-3">Raw String</th><th>Occurrences</th></tr></thead>
      <tbody>
      {% for row in top_unmatched %}
        <tr><td class="px-3 small">{{ row[0] }}</td><td><span class="badge bg-warning text-dark">{{ row[1] }}</span></td></tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% else %}
<div class="alert alert-success">No unmatched ingredient strings logged yet. Import some recipes to populate this dashboard.</div>
{% endif %}
{% endblock %}