{% extends "base.html" %}
{% block subheader %}
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
<style>
.anav{font-size:.82rem;text-decoration:none!important;padding:.25rem .55rem;border-radius:.25rem;transition:all .12s;white-space:nowrap}
.anav.act{color:#2ab870!important;font-weight:700;background:rgba(42,184,112,.12);border:1px solid rgba(42,184,112,.25)}
.anav:not(.act){color:#6c757d!important}
.anav:not(.act):hover{color:#2ab870!important;background:rgba(42,184,112,.08)}
.rhnav{font-size:.78rem;text-decoration:none!important;padding:.2rem .5rem;border-radius:.25rem;transition:all .12s;white-space:nowrap;border:1px solid transparent}
.rhnav.act{background:#198754;color:#fff!important;font-weight:600;border-color:#198754}
.rhnav:not(.act){color:#6c757d!important;background:#f8f9fa;border-color:#e9ecef}
.rhnav:not(.act):hover{color:#212529!important;background:#e9ecef}
</style>

{# ── Main admin nav ── #}
<div style="background:#ffffff;border-bottom:1px solid #dee2e6" class="py-1">
  <div class="container d-flex flex-wrap align-items-center gap-2 gap-md-3">
    <a href="{{ url_for('admin.admin_dashboard') }}" class="anav"><i class="fas fa-tachometer-alt me-1"></i>Dashboard</a>
    <a href="{{ url_for('admin.admin_users') }}" class="anav"><i class="fas fa-users me-1"></i>Users</a>
    <a href="{{ url_for('recipe_hub.moderation') }}" class="anav act"><i class="fas fa-book-open me-1"></i>Recipes</a>
    <a href="{{ url_for('data_hub.dashboard') }}" class="anav"><i class="fas fa-database me-1"></i>Data Hub</a>
    <a href="{{ url_for('admin.admin_logs') }}" class="anav"><i class="fas fa-clipboard-list me-1"></i>Logs</a>
    <a href="{{ url_for('admin.admin_settings') }}" class="anav"><i class="fas fa-cog me-1"></i>Settings</a>
    <a href="{{ url_for('admin.admin_demo_settings') }}" class="anav"><i class="fas fa-flask me-1"></i>Demo</a>
    <a href="{{ url_for('smoketest_report') }}" class="anav"><i class="fas fa-vial me-1"></i>QA</a>
  </div>
</div>

{# ── Recipe Hub sub-nav ── #}
<div style="background:#f8f9fa;border-bottom:1px solid #e9ecef" class="py-1">
  <div class="container d-flex flex-wrap align-items-center gap-1">
    <span class="text-muted me-1" style="font-size:.66rem"><i class="fas fa-book-open me-1"></i>Recipes:</span>
    <a href="{{ url_for('recipe_hub.moderation') }}" class="rhnav {{ 'act' if active=='moderation' }}">
      <i class="fas fa-eye me-1"></i>Moderation</a>
    <a href="{{ url_for('recipe_hub.flagged') }}" class="rhnav {{ 'act' if active=='flagged' }}">
      <i class="fas fa-flag me-1"></i>Flagged
      {% if flag_count and flag_count > 0 %}<span class="badge bg-danger rounded-pill ms-1" style="font-size:.5rem">{{ flag_count }}</span>{% endif %}
    </a>
    <a href="{{ url_for('recipe_hub.import_log') }}" class="rhnav {{ 'act' if active=='imports' }}">
      <i class="fas fa-file-import me-1"></i>Import Log</a>
    <a href="{{ url_for('recipe_hub.comparison') }}" class="rhnav {{ 'act' if active=='comparison' }}">
      <i class="fas fa-columns me-1"></i>Comparison</a>
    <a href="{{ url_for('recipe_hub.batch') }}" class="rhnav {{ 'act' if active=='batch' }}">
      <i class="fas fa-layer-group me-1"></i>Batch Import</a>
  </div>
</div>
{% endblock %}

{% block content %}
<div class="container py-4">
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% for category, message in messages %}
      <div class="alert alert-{{ category }} alert-dismissible fade show">
        {{ message }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      </div>
    {% endfor %}
  {% endwith %}
  {% block recipe_hub_content %}{% endblock %}
</div>

<div class="modal fade" id="confirmModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow">
      <div class="modal-header py-2 bg-danger bg-opacity-10 border-bottom">
        <h6 class="modal-title mb-0"><i class="fas fa-exclamation-triangle text-danger me-2"></i>Confirm Action</h6>
        <button type="button" class="btn-close btn-close-sm" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body py-3" id="confirmModalMsg">Are you sure?</div>
      <div class="modal-footer py-2 border-top">
        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger btn-sm" id="confirmModalYes"><i class="fas fa-trash me-1"></i>Confirm</button>
      </div>
    </div>
  </div>
</div>
<script>
(function(){
  var _m;
  function gM(){if(!_m)_m=new bootstrap.Modal(document.getElementById('confirmModal'));return _m;}
  function fB(cb){var o=document.getElementById('confirmModalYes');var n=o.cloneNode(true);n.id='confirmModalYes';o.parentNode.replaceChild(n,o);n.addEventListener('click',cb);}
  document.addEventListener('submit',function(e){
    var f=e.target.closest('.confirm-form');if(!f)return;e.preventDefault();
    document.getElementById('confirmModalMsg').textContent=f.dataset.confirm||'Are you sure?';
    fB(function(){gM().hide();f.classList.remove('confirm-form');f.submit();f.classList.add('confirm-form');});
    gM().show();
  });
})();
</script>
<div class="container-fluid px-4 py-2 mt-3 border-top" style="background:#f8fafc;font-size:.72rem;color:#9ca3af">
  <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
    <span><i class="fas fa-book-open me-1 text-success opacity-50"></i>KitchenCrate Admin — Recipes</span>
    <span><a href="{{ url_for('changelog') }}" class="text-muted text-decoration-none">Changelog</a></span>
  </div>
</div>
{% endblock %}