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

{% block title %}{{ meta_title }}{% endblock %}

{% block content %}
<div class="app-shell">
  <aside class="app-sidebar">
    <a class="brand-mark" href="{% url 'home' %}" aria-label="FlowDesk Sales home">
      <span class="brand-mark__core">F</span>
    </a>
    <nav class="sidebar-nav" aria-label="Primary navigation">
      {% for item in nav_items %}
      <a class="sidebar-link {% if forloop.first %}is-active{% endif %}" href="{{ item.url }}" data-label="{{ item.label }}">
        <i class="bi {{ item.icon }}"></i>
      </a>
      {% endfor %}
    </nav>
  </aside>

  <main class="app-main">
    <section class="hero-panel">
      <div class="hero-copy">
        <span class="eyebrow">Web-first sales cockpit</span>
        <h1>Compact customer workspace built for <span>lead → quote → won</span>.</h1>
        <p>Default concept for your Odoo-connected UI: searchable customer/project context, persistent icon-only navigation, and dockable panels for Opportunities, Quotations, Projects, Agenda, and Tasks.</p>
        <div class="hero-actions">
          <a class="btn btn-accent" href="#quick-create">Create a workspace</a>
          <a class="btn btn-ghost" href="#recent-workspaces">See active pipeline</a>
        </div>
      </div>
      <div class="hero-visual" aria-hidden="true">
        <div class="shape shape-sphere"></div>
        <div class="shape shape-card">
          <div class="mini-bar"></div>
          <div class="mini-grid">
            <span></span><span></span><span></span><span></span>
          </div>
        </div>
        <div class="shape shape-cylinder"></div>
      </div>
    </section>

    <section class="top-toolbar">
      <form method="get" class="search-card" role="search">
        <div class="search-field-wrap">
          <i class="bi bi-search"></i>
          <input type="search" name="q" value="{{ search_query }}" class="search-field" placeholder="Search customer, address, zip, project # or opportunity">
        </div>
        <button type="submit" class="btn btn-dark-shell">Search</button>
      </form>
      <a class="admin-pill" href="/admin/">Admin</a>
    </section>

    {% if messages %}
    <section class="message-stack" aria-live="polite">
      {% for message in messages %}
      <div class="alert custom-alert alert-{{ message.tags|default:'info' }}">{{ message }}</div>
      {% endfor %}
    </section>
    {% endif %}

    <section class="stats-grid">
      <article class="stat-card">
        <span class="stat-label">Tracked workspaces</span>
        <strong>{{ workspace_count }}</strong>
        <p>Customer or project contexts accessible from one search bar.</p>
      </article>
      <article class="stat-card">
        <span class="stat-label">Active deals</span>
        <strong>{{ active_count }}</strong>
        <p>Fast switching without leaving the main canvas.</p>
      </article>
      <article class="stat-card">
        <span class="stat-label">Won</span>
        <strong>{{ won_count }}</strong>
        <p>Deals ready to hand over into project delivery later.</p>
      </article>
      <article class="stat-card stat-card--accent">
        <span class="stat-label">Pipeline value</span>
        <strong>€{{ pipeline_total|floatformat:0 }}</strong>
        <p>Compact overview for managers and sales reps.</p>
      </article>
    </section>

    <section class="content-grid">
      <article class="surface-card template-card-list">
        <div class="section-heading">
          <div>
            <span class="eyebrow">Saved templates</span>
            <h2>Pick the right focus instantly</h2>
          </div>
        </div>
        <div class="template-list">
          {% for value, label in layout_choices %}
          <div class="template-tile">
            <div class="template-icon"><i class="bi bi-layout-sidebar-inset"></i></div>
            <div>
              <h3>{{ label }}</h3>
              <p>{% if value == 'customer360' %}See opportunity, agenda, projects, and quotation side by side.{% elif value == 'quotation_focus' %}Give most space to the quote editor when speed matters.{% else %}Keep projects and follow-ups visible during planning calls.{% endif %}</p>
            </div>
          </div>
          {% endfor %}
        </div>
      </article>

      <article id="quick-create" class="surface-card create-card">
        <div class="section-heading">
          <div>
            <span class="eyebrow">First workflow widget</span>
            <h2>Create a sales workspace</h2>
          </div>
          <span class="section-chip">Lead intake → detail workspace</span>
        </div>
        <form method="post" class="workspace-form" novalidate>
          {% csrf_token %}
          <div class="form-grid">
            {% for field in create_form %}
            <div class="form-field {% if field.name == 'summary' %}form-field--full{% endif %} {% if field.name == 'next_step' or field.name == 'next_meeting_at' %}form-field--wide{% endif %}">
              <label for="{{ field.id_for_label }}">{{ field.label }}</label>
              {{ field }}
              {% if field.errors %}<div class="field-error">{{ field.errors|join:', ' }}</div>{% endif %}
            </div>
            {% endfor %}
          </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-accent">Open workspace</button>
            <p>This creates the customer/project context and opens the single-screen detail view.</p>
          </div>
        </form>
      </article>
    </section>

    <section class="content-grid content-grid--bottom">
      <article id="recent-workspaces" class="surface-card list-card">
        <div class="section-heading">
          <div>
            <span class="eyebrow">Pipeline list</span>
            <h2>Recent workspaces</h2>
          </div>
        </div>
        {% if workspaces %}
        <div class="workspace-list">
          {% for workspace in workspaces %}
          <a href="{% url 'workspace_detail' workspace.pk %}" class="workspace-row">
            <div>
              <div class="workspace-row__title">{{ workspace.customer_name }}</div>
              <div class="workspace-row__meta">{{ workspace.project_number|default:workspace.project_name|default:"No project number yet" }} · {{ workspace.opportunity_title }}</div>
            </div>
            <div class="workspace-row__side">
              <span class="stage-pill stage-{{ workspace.stage }}">{{ workspace.get_stage_display }}</span>
              <strong>€{{ workspace.estimated_value|floatformat:0 }}</strong>
            </div>
          </a>
          {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
          <i class="bi bi-stars"></i>
          <h3>No workspaces yet</h3>
          <p>Create the first customer/project context above to preview the one-screen layout.</p>
        </div>
        {% endif %}
      </article>

      <article class="surface-card agenda-card">
        <div class="section-heading">
          <div>
            <span class="eyebrow">Agenda snapshot</span>
            <h2>Upcoming tasks</h2>
          </div>
        </div>
        {% if upcoming_items %}
        <div class="agenda-list">
          {% for item in upcoming_items %}
          <div class="agenda-item">
            <div class="agenda-icon"><i class="bi bi-calendar-event"></i></div>
            <div>
              <strong>{{ item.title }}</strong>
              <p>{{ item.workspace.customer_name }} · {{ item.get_activity_type_display }} · {{ item.due_at|date:"d M H:i" }}</p>
            </div>
          </div>
          {% endfor %}
        </div>
        {% else %}
        <div class="empty-state empty-state--small">
          <i class="bi bi-calendar2-check"></i>
          <p>Upcoming meetings and actions appear here after you create a workspace.</p>
        </div>
        {% endif %}
      </article>
    </section>
  </main>
</div>
{% endblock %}