{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
The caller's builder projects.

The list comes from /builder/fetchProjects, which is already narrowed to the
signed-in account server side — this page never asks for "all projects" and
filters afterwards.
{% endcomment %}

{% block title %}My builder projects{% endblock %}

{% block styles %}
  <link rel="stylesheet" href="{% static 'siteBuilder/siteBuilder.css' %}">
{% endblock %}

{% block content %}
<div ng-controller="builderProjectsController">

  {{ canBuild|json_script:"cpBuilderCanBuild" }}
  {{ availability|json_script:"cpBuilderAvailability" }}

  <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">My builder projects</h1>
      <p class="cpb-muted mb-0 small">
        Draft and published sites you have generated with the AI website builder.
      </p>
    </div>
    <div class="d-flex gap-2">
      <a href="/builder/" class="btn btn-outline-secondary btn-sm">
        <i class="fas fa-table-cells-large me-1"></i>Templates
      </a>
      {% if canBuild == 1 %}
        <a href="/builder/new" class="btn btn-primary btn-sm">
          <i class="fas fa-plus me-1"></i>New site
        </a>
      {% endif %}
    </div>
  </div>

  {% include "siteBuilder/_availability.html" %}

  <div class="alert alert-danger py-2 px-3" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i><span ng-bind="errorMessage"></span>
  </div>

  <div class="card">
    <div class="card-body">

      <div class="row g-2 align-items-center mb-3">
        <div class="col-md-6">
          <div class="input-group">
            <span class="input-group-text"><i class="fas fa-magnifying-glass"></i></span>
            <input type="search" class="form-control"
                   placeholder="Search by name, domain or status…"
                   ng-model="search" aria-label="Search projects">
          </div>
        </div>
        <div class="col-md-6 text-md-end">
          <button type="button" class="btn btn-outline-secondary btn-sm"
                  ng-click="load()" ng-disabled="busy">
            <i class="fas fa-rotate me-1"></i>Refresh
          </button>
        </div>
      </div>

      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead>
            <tr>
              <th scope="col">Project</th>
              <th scope="col">Website</th>
              <th scope="col">Template</th>
              <th scope="col">Status</th>
              <th scope="col">Updated</th>
              <th scope="col" class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="project in projects | filter:matches" ng-cloak>
              <td>
                <a class="text-decoration-none fw-semibold" ng-href="{$ openURL(project) $}"
                   ng-bind="project.name"></a>
                <div class="small cpb-muted" ng-bind="project.businessName"></div>
              </td>
              <td>
                <a class="text-decoration-none cpb-mono"
                   ng-href="https://{$ project.domain $}" target="_blank" rel="noopener"
                   ng-bind="project.domain"></a>
              </td>
              <td ng-bind="project.templateName"></td>
              <td>
                <span class="badge rounded-pill" ng-class="statusClass(project.status)"
                      ng-bind="project.status"></span>
              </td>
              <td class="small cpb-muted"
                  ng-bind="(project.lastModified || project.dateCreated) | date:'short'"></td>
              <td class="text-end">
                <div class="btn-group btn-group-sm" role="group" aria-label="Project actions">
                  <a class="btn btn-outline-secondary" ng-href="{$ openURL(project) $}"
                     title="Open"><i class="fas fa-pen-to-square"></i></a>
                  <a class="btn btn-outline-secondary" ng-if="project.status === 'deployed'"
                     ng-href="https://{$ project.domain $}/" target="_blank" rel="noopener"
                     title="View live site"><i class="fas fa-arrow-up-right-from-square"></i></a>
                  {% if canBuild == 1 %}
                    <button type="button" class="btn btn-outline-danger"
                            ng-click="remove(project)"
                            ng-disabled="project.status === 'generating'"
                            title="Delete project"><i class="fas fa-trash"></i></button>
                  {% endif %}
                </div>
              </td>
            </tr>

            <tr ng-show="busy" ng-cloak>
              <td colspan="6" class="text-center cpb-muted py-4">
                <i class="fas fa-circle-notch fa-spin me-1"></i>Loading…
              </td>
            </tr>

            <tr ng-show="!busy && projects.length === 0" ng-cloak>
              <td colspan="6" class="text-center cpb-muted py-5">
                <div class="fs-2 mb-2"><i class="fa-regular fa-folder-open"></i></div>
                <p class="mb-1">You have not built a site yet.</p>
                {% if canBuild == 1 %}
                  <a href="/builder/new" class="btn btn-primary btn-sm mt-2">
                    <i class="fas fa-wand-magic-sparkles me-1"></i>Build your first site
                  </a>
                {% endif %}
              </td>
            </tr>
          </tbody>
        </table>
      </div>

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

{% block scripts %}
  <script src="{% static 'siteBuilder/siteBuilder.js' %}"></script>
{% endblock %}