{% extends 'base.html' %}

{% block title %}woltspace - the lodge{% endblock %}

{% block head %}
<link rel="stylesheet" href="/static/home.css?v={{ cache_bust }}">
<link rel="stylesheet" href="/static/wolts-page.css?v={{ cache_bust }}">
{% endblock %}

{% block before_sidebar %}
{% include 'partials/forest-scene.html' %}
{% endblock %}

{% block content %}
  <!-- ── HOME VIEW ── -->
  <div id="home-view" class="view active">
    <div class="home-view">
      <div class="home-greeting" id="home-greeting">the lodge</div>
      <div class="home-tagline">where wolts live and things get built.</div>
      <div class="home-quote" id="home-quote"></div>
      <div id="home-harness-choice" class="home-harness-choice" style="display:none">
        <div class="home-harness-title">Pick your harness</div>
        <div class="home-harness-copy">This becomes your lodge default. You can switch it anytime in Settings.</div>
        <div id="home-harness-options" class="home-harness-options"></div>
        <div id="home-harness-status" class="home-harness-status"></div>
      </div>
      <div id="home-starter-welcome" class="home-starter-welcome" style="display:none"></div>
      <div id="home-create-cta" class="home-create-cta" style="display:none">
        <button class="home-create-btn" onclick="openCreateWolt()">create your first wolt</button>
      </div>
    </div>
  </div>

  <!-- ── WOLTS VIEW ── (filled by wolts-page.js) -->
  <div id="wolts-view" class="view"></div>

  <!-- ── APPS VIEW ── -->
  <div id="apps-view" class="view">
    <div class="main-header">
      <div>
        <div class="main-title">Apps</div>
        <div class="main-subtitle" id="apps-subtitle">loading...</div>
      </div>
      <div class="header-actions">
        <button class="btn btn-ghost" onclick="loadApps()">⟳ refresh</button>
      </div>
    </div>

    <div class="filter-strip" id="app-filters">
      <button class="filter-chip active" onclick="filterApps('all', this)">All</button>
      <button class="filter-chip" onclick="filterApps('running', this)">Running</button>
      <button class="filter-chip" onclick="filterApps('stopped', this)">Stopped</button>
    </div>

    <div class="app-grid" id="app-grid">
      <div class="empty-state">
        <div class="empty-state-icon">📦</div>
        <div class="empty-state-text">loading apps...</div>
      </div>
    </div>
  </div>

  <!-- ── SESSIONS VIEW ── -->
  <div id="sessions-view" class="view">
    <div class="main-header">
      <div>
        <div class="main-title">Sessions</div>
        <div class="main-subtitle" id="sessions-subtitle">loading...</div>
      </div>
    </div>

    <div id="sessions-list" class="sessions-list">
      <div class="empty-state">
        <div class="empty-state-icon">🌿</div>
        <div class="empty-state-text">loading sessions...</div>
      </div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
<script src="/static/home-scene.js"></script>
<script src="/static/wolts-page.js?v={{ cache_bust }}"></script>
{% endblock %}