{% extends "base.html" %}
{% block content %}
<section class="hero-panel card">
  <div class="hero-copy">
    <p class="eyebrow">Hosted Command Deck</p>
    <h2>{{ app_title }}</h2>
    <p>Qt-inspired web control surface for login security, user management, audit visibility, and deployment readiness.</p>
  </div>
  <div class="hero-actions">
    {% if current_user.role == 'admin' %}
    <a class="accent-button" href="{{ url_for('dashboard.admin_users') }}">Open User Control</a>
    {% endif %}
    <a class="ghost-button" href="{{ url_for('dashboard.index') }}">Refresh Status</a>
  </div>
</section>

<section class="stats-grid">
  <article class="card stat-card">
    <p class="card-label">Workspace Role</p>
    <h3>Your Role</h3>
    <p class="metric">{{ current_role }}</p>
  </article>
  <article class="card stat-card">
    <p class="card-label">Access Control</p>
    <h3>User Accounts</h3>
    <p class="metric">{{ user_count }}</p>
  </article>
  <article class="card stat-card">
    <p class="card-label">Security Layer</p>
    <h3>Security</h3>
    <p class="metric">Login lockout enabled</p>
  </article>
  <article class="card stat-card">
    <p class="card-label">Last Event</p>
    <h3>Status Feed</h3>
    <p class="metric metric-small">{{ last_event }}</p>
  </article>
</section>

<section class="ops-grid">
  <article class="card">
    <div class="card-head">
      <h2>Portal Readiness</h2>
      <p>Quick health readout for local and hosted setup.</p>
    </div>
    <div class="status-list">
      <div class="status-row">
        <span>Secret key configured</span>
        <strong class="{{ 'status-good' if env_ready else 'status-warn' }}">{{ 'Ready' if env_ready else 'Needs update' }}</strong>
      </div>
      <div class="status-row">
        <span>Secure cookie mode</span>
        <strong class="{{ 'status-good' if secure_cookie else 'status-warn' }}">{{ 'Enabled' if secure_cookie else 'Disabled' }}</strong>
      </div>
      <div class="status-row">
        <span>Audit entries visible</span>
        <strong>{{ log_count }}</strong>
      </div>
    </div>
  </article>

  <article class="card">
    <div class="card-head">
      <h2>Quick Actions</h2>
      <p>Core control actions grouped like the Qt tool command deck.</p>
    </div>
    <div class="action-stack">
      {% if current_user.role == 'admin' %}
      <a class="accent-button" href="{{ url_for('dashboard.admin_users') }}">Manage Users</a>
      {% endif %}
      <form method="post" action="{{ url_for('auth.logout') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button class="ghost-button" type="submit">Sign Out Securely</button>
      </form>
    </div>
  </article>
</section>

<section class="card command-card">
  <div class="card-head">
    <h2>Recent Audit Log</h2>
    <p>Track sign-ins and admin actions from one place, similar to the Qt task log.</p>
  </div>
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>When</th>
          <th>Event</th>
          <th>Detail</th>
          <th>IP</th>
        </tr>
      </thead>
      <tbody>
        {% for entry in recent_logs %}
        <tr>
          <td>{{ entry.created_at }}</td>
          <td>{{ entry.event_type }}</td>
          <td>{{ entry.detail }}</td>
          <td>{{ entry.ip_address or '-' }}</td>
        </tr>
        {% else %}
        <tr><td colspan="4">No audit events yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>

{% if current_user.role == 'admin' %}
<section class="card">
  <div class="card-head">
    <h2>Admin Control Bay</h2>
    <p>Manage access and bootstrap the hosted control surface.</p>
  </div>
  <div class="admin-callout">
    <div>
      <p class="card-label">Primary Admin Action</p>
      <h3>User and role management</h3>
      <p>Create portal users, assign roles, and review who has access.</p>
    </div>
    <a class="accent-button inline-button" href="{{ url_for('dashboard.admin_users') }}">Manage Users</a>
  </div>
</section>
{% endif %}
{% endblock %}