{% extends "base.html" %}
{% block title %}Scopuli — sites{% endblock %}
{% block head %}
  <link rel="stylesheet" href="{{ url_for('static', filename='home.css') }}">
{% endblock %}

{% block main %}
<section class="hero">
  <h1>Your sites</h1>
  <p class="hint">From <code>{{ websites_root }}</code></p>
  {% if not surge_installed %}
  <p class="warn">
    surge CLI not found on PATH — install with <code>npm install -g surge</code>
    and run <code>surge login</code> before publishing.
  </p>
  {% endif %}
  {% if ai_warning %}
  <p class="warn">
    AI provider <strong>{{ ai_warning.provider }}</strong> has no API key
    configured. Add one in
    <a href="{{ url_for('scopuli.settings_page') }}">Settings</a>, set
    <code>{{ ai_warning.env_var }}</code> in your environment, or switch
    to Ollama for local-only models.
  </p>
  {% endif %}
</section>

{% if sites %}
<ul class="site-grid">
  {% for site in sites %}
  {% set info = surge_info[site.name] %}
  {% set surge_domain = info.surge_domain %}
  {% set cname = info.cname %}
  {% set primary = info.primary %}
  <li class="site-card" data-site="{{ site.name }}">
    <header>
      <h2>{{ site.name }}</h2>
      <span class="entry">{{ site.entry }}</span>
    </header>
    <div class="surge-row">
      {% if primary %}
        <div class="domain-stack">
          <a class="domain" href="https://{{ primary }}" target="_blank" rel="noopener">{{ primary }}</a>
          {% if cname and surge_domain %}
            <span class="domain-via">via <code>{{ surge_domain }}</code></span>
          {% endif %}
        </div>
        <button class="link change-surge"
                data-site="{{ site.name }}"
                data-subdomain="{{ info.subdomain }}"
                data-cname="{{ cname }}">change</button>
      {% else %}
        <span class="domain blank">no surge domain</span>
        <button class="link change-surge"
                data-site="{{ site.name }}"
                data-subdomain=""
                data-cname="">set</button>
      {% endif %}
    </div>
    <div class="actions">
      <a class="btn primary" href="{{ url_for('scopuli.edit', site_name=site.name) }}">Edit</a>
      <button class="btn" data-action="publish" data-site="{{ site.name }}" {% if not surge_domain %}disabled title="set a surge domain first"{% endif %}>
        Publish
      </button>
      {% if primary %}
        <a class="btn ghost" href="https://{{ primary }}" target="_blank" rel="noopener">Open live</a>
      {% endif %}
    </div>
  </li>
  {% endfor %}
</ul>
{% else %}
<div class="empty">
  <p>No sites found under <code>{{ websites_root }}</code>.</p>
  <p>Drop a folder containing <code>index.html</code> into <code>websites/</code> and refresh.</p>
</div>
{% endif %}

<!-- Surge modal -->
<dialog id="surge-modal" class="modal">
  <form method="dialog" id="surge-form">
    <h3>Surge settings</h3>
    <p class="hint">Site: <strong id="surge-site-name"></strong></p>

    <label class="field-block">
      <span class="field-label">Surge subdomain</span>
      <div class="domain-input">
        <input type="text" id="surge-subdomain" required pattern="[a-z0-9][a-z0-9-]*"
               placeholder="eros" autocomplete="off">
        <span class="suffix">.surge.sh</span>
      </div>
    </label>

    <label class="field-block">
      <span class="field-label">
        Custom domain
        <em class="optional">optional</em>
      </span>
      <input type="text" id="surge-cname" autocomplete="off"
             placeholder="myportfolio.com" pattern="[a-z0-9.-]*">
      <span class="field-help">
        Writes a <code>CNAME</code> file in the site folder. After you
        publish, surge serves from this domain — you'll still need to point
        your DNS at surge per their docs. Leave blank to clear an existing
        custom domain.
      </span>
    </label>

    <p class="error" id="surge-error" hidden></p>
    <menu>
      <button value="cancel" type="button" class="btn ghost" id="surge-cancel">Cancel</button>
      <button value="save" type="button" class="btn primary" id="surge-save">Save</button>
    </menu>
  </form>
</dialog>

<!-- Publish result modal -->
<dialog id="publish-modal" class="modal">
  <form method="dialog">
    <h3 id="publish-title">Publishing…</h3>
    <pre id="publish-output" class="output"></pre>
    <menu>
      <button value="ok" type="button" class="btn primary" id="publish-close">Close</button>
    </menu>
  </form>
</dialog>
{% endblock %}

{% block scripts %}
  <script src="{{ url_for('static', filename='home.js') }}"></script>
{% endblock %}