{% extends "../layouts/master.njk" %}

{% block csslib %}
  <link href="/cms-static/admin/assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css">
  <link href="/cms-static/admin/assets/plugins/custom/vis-timeline/vis-timeline.bundle.css" rel="stylesheet" type="text/css">
{% endblock %}

{% block jslib %}
  <script src="/cms-static/admin/assets/plugins/custom/datatables/datatables.bundle.js"></script>
  {# //- <script src="/cms-static/admin/assets/js/widgets.bundle.js"></script> #}
  {# //- <script src="/cms-static/admin/assets/js/custom/widgets.js"></script> #}
  {# <script src="/cms-static/admin/assets/js/custom/utilities/modals/users-search.js"></script> #}
  {# <script src="/cms-static/admin/assets/plugins/custom/vis-timeline/vis-timeline.bundle.js"></script> #}
{% endblock %}

{% block customScript %}
  <script>
    {# console.log("{{ analyticsData.user.value }}"); #}
  </script>
{% endblock %}

{% block content %}
  {% block title %}
		<title>Dashboard | {{browserTitle | upper()}} CMS</title>
	{% endblock %}

  <div class="d-flex flex-column flex-column-fluid">
    <div class="app-toolbar py-3 py-lg-6" id="beaver_app_toolbar">
      <div class="app-container container-xxl d-flex flex-stack" id="beaver_app_toolbar_container">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
          <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">Dashboard
          <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
              <li class="breadcrumb-item text-muted">
                <a class="text-muted text-hover-primary" href="{{LANDING_URL}}">Home</a>
              </li>
              <li class="breadcrumb-item">
                <span class="bullet bg-gray-400 w-5px h-2px"></span></li>
              <li class="breadcrumb-item text-muted">Dashboard</li>
            </ul>
          </h1>
        </div>
        {# <div class="d-flex align-items-center gap-2 gap-lg-3">
          <a class="btn btn-sm fw-bold bg-body btn-color-gray-700 btn-active-color-primary" href="/admin/ecommerce/orders">Manage Sales</a>
          <a class="btn btn-sm fw-bold btn-primary" href="/admin/ecommerce/catalog/products/add">Add Product</a>
        </div> #}
      </div>
    </div>
    <div class="app-content flex-column-fluid" id="beaver_app_content">
      <div class="app-container container-xxl" id="beaver_app_content_container">
        <div class="p-6 shadow-lg rounded-lg bg-white">
          <h2 class="font-semibold text-4xl mb-5">Welcome {{authUser.admin_name}} 👋</h2>
          <p class="text-gray-600 mb-6">You're logged in as: <span class="badge badge-success font-medium">{{authUser.admin_role | replace('_', ' ') | capitalize}}<span></p>
          
          <!-- Quick Actions Section -->
          {% if authUser.admin_role == 'super_admin' or authUser.admin_role == 'admin' %}
            <div class="mb-8">
              <h3 class="text-xl font-semibold mb-4">Quick Actions</h3>
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                {# <a href="/admin/content/create" class="p-4 border rounded-lg hover:bg-gray-50 transition-colors">
                  <div class="text-blue-600 mb-2">📝</div>
                  <h4 class="font-medium">Create New Content</h4>
                </a> #}
                
                <a href="/admin/users" class="p-4 border rounded-lg hover:bg-gray-50 transition-colors">
                  <div class="text-green-600 mb-2">👥</div>
                  <h4 class="font-medium">Manage Users</h4>
                </a>
              </div>
            </div>
          {% endif %}

          <!-- Recent Activity Section -->
          <div>
            <h3 class="text-xl font-semibold mb-4">Recent Activity</h3>
            <div class="space-y-4">
              <!-- Activity items would be populated by the server -->
              <div class="p-4 border rounded-lg">
                <p class="text-sm text-gray-500">No recent activity to show</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

{% endblock %}