{% extends 'dashboard/base.html' %}
{% block title %}Dashboard{% endblock %}
{% block content %}
<div class="sp-topbar">
  <div>
    <h1>Dashboard</h1>
    <p>Welcome back, {{ request.user.email|upper }}</p>
  </div>
</div>

{% if orphaned_sections_count %}
<div class="sp-card" style="border-left:4px solid #e0a800; background:#fffbea; margin-bottom:20px;">
  <h2 style="margin-top:0;">⚠️ Some content isn't showing on your website</h2>
  <p class="sp-muted">
    We found {{ orphaned_sections_count }} section{{ orphaned_sections_count|pluralize }}
    {% if orphaned_testimonials_count %}(including {{ orphaned_testimonials_count }} testimonial{{ orphaned_testimonials_count|pluralize }}){% endif %}
    that got disconnected from your live pages — usually left behind after a site was reset.
    This content won't appear anywhere on your website. Cleaning it up removes only these
    disconnected items; nothing on your live pages is affected.
  </p>
  <form method="post" action="{% url 'dashboard_cleanup_orphaned_sections' %}" data-sp-confirm="This removes disconnected content that isn't showing on your site." data-sp-confirm-title="Clean up orphaned content?">
    {% csrf_token %}
    <button type="submit" class="sp-btn sp-btn-primary">Clean up now</button>
  </form>
</div>
{% endif %}

<div class="sp-stat-grid">
  <div class="sp-stat-card">
    <div class="sp-stat-icon sp-stat-icon-blue"><i class="fa-regular fa-file-lines"></i></div>
    <div class="sp-stat-label">PAGES</div>
    <div class="sp-stat-num">{{ pages_count }}</div>
    <div class="sp-stat-sub">Published</div>
    <a href="{% url 'dashboard_pages_list' %}" class="sp-stat-link">Manage pages →</a>
  </div>

  <div class="sp-stat-card">
    <div class="sp-stat-icon sp-stat-icon-green"><i class="fa-solid fa-briefcase"></i></div>
    <div class="sp-stat-label">SERVICES</div>
    <div class="sp-stat-num">{{ services_count }}</div>
    <div class="sp-stat-sub">Active</div>
    <a href="{% url 'dashboard_services_list' %}" class="sp-stat-link">Manage services →</a>
  </div>

  <div class="sp-stat-card">
    <div class="sp-stat-icon sp-stat-icon-purple"><i class="fa-regular fa-images"></i></div>
    <div class="sp-stat-label">GALLERIES</div>
    <div class="sp-stat-num">{{ galleries_count }}</div>
    <div class="sp-stat-sub">Published</div>
    <a href="{% url 'dashboard_gallery_list' %}" class="sp-stat-link">Manage galleries →</a>
  </div>

  <div class="sp-stat-card">
    <div class="sp-stat-icon sp-stat-icon-orange"><i class="fa-regular fa-envelope"></i></div>
    <div class="sp-stat-label">NEW MESSAGES</div>
    <div class="sp-stat-num">{{ enquiries_new }}</div>
    <div class="sp-stat-sub">Unread of {{ enquiries_total }} total</div>
    <a href="{% url 'dashboard_enquiries_list' %}" class="sp-stat-link">View enquiries →</a>
  </div>
</div>

<div class="sp-two-col">
  <div class="sp-card">
    <div class="sp-flex-between">
      <h2 style="margin:0;">Recent Enquiries</h2>
      <a href="{% url 'dashboard_enquiries_list' %}" class="sp-link-sm">View all</a>
    </div>
    <div class="sp-enquiry-list">
      {% for e in recent_enquiries %}
      <a href="{% url 'dashboard_enquiry_detail' e.id %}" class="sp-enquiry-row">
        <div class="sp-enquiry-icon"><i class="fa-regular fa-envelope"></i></div>
        <div class="sp-enquiry-body">
          <div class="sp-enquiry-name">{{ e.name }}{% if not e.is_read %} <span class="sp-dot-blue"></span>{% endif %}</div>
          <div class="sp-enquiry-msg">{{ e.message|truncatechars:60 }}</div>
        </div>
        <div class="sp-enquiry-time">{{ e.created_at|timesince }} ago</div>
      </a>
      {% empty %}
      <p class="sp-empty">No enquiries yet.</p>
      {% endfor %}
    </div>
  </div>

  <div class="sp-card">
    <h2>Site Status</h2>
    <div class="sp-status-row">
      <div class="sp-status-icon sp-status-icon-blue"><i class="fa-solid fa-globe"></i></div>
      <div class="sp-status-label">Site Status</div>
      <span class="sp-pill sp-pill-green">Live</span>
    </div>
    <div class="sp-status-row">
      <div class="sp-status-icon sp-status-icon-green"><i class="fa-solid fa-shield-halved"></i></div>
      <div class="sp-status-label">SSL Certificate</div>
      <span class="sp-pill sp-pill-green">Active</span>
    </div>
    <a href="{% url 'dashboard_settings' %}" class="sp-link-sm" style="margin-top:14px;display:inline-block;">View settings →</a>
  </div>
</div>

<div class="sp-card">
  <h2>Quick Actions</h2>
  <div class="sp-quick-actions">
    <a href="{% url 'dashboard_pages_list' %}" class="sp-quick-btn"><i class="fa-regular fa-file-lines"></i> Add New Page</a>
    <a href="{% url 'dashboard_services_list' %}" class="sp-quick-btn"><i class="fa-solid fa-briefcase"></i> Add New Service</a>
    <a href="{% url 'dashboard_gallery_list' %}" class="sp-quick-btn"><i class="fa-regular fa-images"></i> Upload to Gallery</a>
    <a href="{% url 'dashboard_enquiries_list' %}" class="sp-quick-btn"><i class="fa-regular fa-envelope"></i> View Enquiries</a>
    <a href="/" target="_blank" class="sp-quick-btn"><i class="fa-regular fa-eye"></i> View Website</a>
    <a href="{% url 'dashboard_settings' %}" class="sp-quick-btn"><i class="fa-solid fa-gear"></i> Site Settings</a>
  </div>
</div>
{% endblock %}