{% extends admin_config.templates ~ "/base.html" %} {% block title %}Dashboard{%
endblock %} {% set active_page = 'dashboard' %} {% block content %}
<div class="mx-auto space-y-8">
  {# ── Page header ── #}
  <!-- <div>
    <h1 class="text-2xl font-bold text-moose-900">Dashboard</h1>
    <p class="text-moose-500 text-sm mt-1">
      Overview of your content and uploaded files.
    </p>
  </div> -->

  <div class="bg-gray-100 p-3 rounded-2xl space-y-4">
    {% for group, heading in [('content', 'Content'), ('uploads', 'Uploaded Files')] %}
    <section
      class=""
      aria-labelledby="{{ group }}-stats-heading"
    >
      <h2
        id="{{ group }}-stats-heading"
        class="text-md mb-1 font-semibold text-moose-800"
      >
        {{ heading }}
      </h2>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div
          class="bg-white rounded-xl border border-moose-200 p-4 text-center"
        >
          <p
            class="text-2xl font-bold text-moose-800"
            id="{{ group }}-stat-files"
          >
            —
          </p>
          <p class="text-xs text-moose-500 mt-1">Files</p>
        </div>
        <div
          class="bg-white rounded-xl border border-moose-200 p-4 text-center"
        >
          <p
            class="text-2xl font-bold text-moose-800"
            id="{{ group }}-stat-dirs"
          >
            —
          </p>
          <p class="text-xs text-moose-500 mt-1">Directories</p>
        </div>
        <div
          class="bg-white rounded-xl border border-moose-200 p-4 text-center"
        >
          <p
            class="text-2xl font-bold text-moose-800"
            id="{{ group }}-stat-size"
          >
            —
          </p>
          <p class="text-xs text-moose-500 mt-1">Total Size</p>
        </div>
        <div
          class="bg-white rounded-xl border border-moose-200 p-4 text-center"
        >
          <p
            class="text-2xl font-bold text-moose-800 capitalize"
            id="{{ group }}-stat-modified"
          >
            —
          </p>
          <p class="text-xs text-moose-500 mt-1">Last Modified</p>
        </div>
      </div>
    </section>
    {% endfor %}
  </div>

  {# ── Quick actions ── #}
  <div class="flex flex-wrap gap-3">
   
    <a
      href="/{{ admin_config.prefix }}/browse/"
      class="inline-flex items-center gap-2 bg-white hover:bg-moose-100 text-moose-700 border border-moose-300 text-sm font-medium px-4 py-2 rounded-lg transition-colors"
    >
      <svg
        class="w-4 h-4"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
        />
      </svg>
      Browse Content
    </a>
  </div>

  {# ── Recent content ── #}
  <div class="bg-white rounded-xl border border-moose-200 overflow-hidden">
    <div class="px-5 py-2 border-b border-moose-200 bg-moose-100">
      <h2 class="text-lg font-semibold text-moose-800">Recent Content</h2>
    </div>
    <div id="recent-list" class="divide-y divide-moose-100">
      <p class="px-5 py-4 text-sm text-moose-400">Loading…</p>
    </div>
  </div>
</div>
{% endblock %} {% block scripts %}
<script>
var prefix = "{{ admin_config.prefix }}";

  
</script>
<script src="/__moosey/static/admin/dashboard.js"></script>
{% endblock %}

{#
<!-- Sample Extra Sidebar Links  -->
<!-- {%block side_bar_links%}
<li>
  <div class="flex items-center gap-1">
    <a
      href="/admin/users"
      title="Admin Users"
      class="flex min-w-0 flex-1 items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium {% if active_page == 'list' %}bg-moose-800 text-white{% else %}text-moose-300 hover:bg-moose-800 hover:text-white{% endif %} transition-colors"
    >
      <span data-sidebar-label class="whitespace-nowrap">Admin Users</span>
    </a>
    <button
      type="button"
      data-sidebar-label
      class="rounded-lg p-2 text-moose-400 hover:bg-moose-800 hover:text-white transition-colors"
      aria-label="Toggle Admin Users links"
      aria-controls="admin-users-links"
      aria-expanded="{% if active_page == 'edit' %}true{% else %}false{% endif %}"
      onclick="const links = document.getElementById('admin-users-links'); const expanded = this.getAttribute('aria-expanded') === 'true'; this.setAttribute('aria-expanded', String(!expanded)); links.classList.toggle('hidden', expanded); this.querySelector('svg').classList.toggle('rotate-180', !expanded);"
    >
      <svg
        class="h-4 w-4 transition-transform {% if active_page == 'edit' %}rotate-180{% endif %}"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
    </button>
  </div>
  <ul
    id="admin-users-links"
    data-sidebar-label
    class="mt-1 space-y-1 border-l border-moose-700 pl-3 {% if active_page != 'edit' %}hidden{% endif %}"
  >
    <li>
      <a
        href="/admin/users/edit"
        title="User Edit"
        class="block rounded-lg px-3 py-2 text-sm font-medium {% if active_page == 'edit' %}bg-moose-800 text-white{% else %}text-moose-400 hover:bg-moose-800 hover:text-white{% endif %} transition-colors"
      >
        User Edit
      </a>
    </li>
  </ul>
</li>
{%endblock%} -->
#}