{% extends 'base.html' %}
{% load static %}

{% block title %}Home{% endblock %}

{% block extra_head %}
<style>
  .dash-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px;
  }
  .dash-card {
    flex: 1 1 260px;
    background: #111;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 16px 20px;
  }
  .dash-card h3 {
    margin: 0 0 12px 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0284E9;
    width: auto;
  }
  .dash-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 15px;
    width: auto;
  }
  .dash-stat .label { color: #aaa; width: auto; }
  .dash-stat .value { color: #fff; font-weight: bold; width: auto; }
  .dash-links a {
    display: block;
    margin-bottom: 7px;
    font-size: 15px;
    color: #fff;
    width: auto;
  }
  .dash-links a::before { content: "→ "; color: #0284E9; }
  .dash-links a:hover { color: #0284E9; }
  .status-ok   { color: #4ade80; }
  .status-warn { color: #facc15; }
</style>
{% endblock %}

{% block content %}
<div style="width:auto; padding: 0;">
  <div class="dash-grid">

    <!-- System Status -->
    <div class="dash-card">
      <h3>System Status</h3>
      <div class="dash-stat">
        <span class="label">Version</span>
        <span class="value">{{ swirl_version }}</span>
      </div>
      <div class="dash-stat">
        <span class="label">Celery</span>
        <span class="value {% if celery_status == 'Running' %}status-ok{% else %}status-warn{% endif %}">
          {{ celery_status }}
        </span>
      </div>
      <div class="dash-stat">
        <span class="label">Active providers</span>
        <span class="value">{{ search_provider_count }}</span>
      </div>
    </div>

    <!-- Search APIs -->
    <div class="dash-card">
      <h3>Search APIs</h3>
      <div class="dash-links">
        <a href="/swirl/searchproviders/" target="_blank">SearchProviders</a>
        <a href="/swirl/querytransforms/" target="_blank">QueryTransforms</a>
        <a href="/swirl/search/" target="_blank">Search</a>
        <a href="/swirl/results/" target="_blank">Results</a>
        <a href="/swirl/api/docs" target="_blank">API Docs (Swagger)</a>
      </div>
    </div>

    <!-- Configuration -->
    <div class="dash-card">
      <h3>Configuration</h3>
      <div class="dash-links">
        <a href="/swirl/authenticators.html" target="_blank">Authenticators</a>
        <a href="/swirl/query_transform_form/" target="_blank">Upload Query Transform CSV</a>
        <a href="/admin/swirl/searchprovider/" target="_blank">Manage SearchProviders</a>
        <a href="/admin/swirl/querytransform/" target="_blank">Manage QueryTransforms</a>
      </div>
    </div>

    <!-- Administration -->
    <div class="dash-card">
      <h3>Administration</h3>
      <div class="dash-links">
        <a href="/admin/" target="_blank">Admin Console</a>
        <a href="/admin/activity/" target="_blank">Analytics</a>
        <a href="https://docs.swirlaiconnect.com/" target="_blank">Documentation</a>
        <a href="https://github.com/swirlai/swirl-search" target="_blank">GitHub</a>
        <a href="https://swirlaiconnect.com/faq/" target="_blank">Support</a>
      </div>
    </div>

  </div>
</div>
{% endblock %}