{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
The application catalogue.

The card grid is rendered from /apps/fetchCatalogue, which returns presentation
data only — no download URLs — because startInstall takes a catalogue slug and
looks the URL up server side. The bootstrap payload below is the same data,
embedded with |json_script so the first paint does not wait for the round trip.
{% endcomment %}

{% block title %}Applications{% endblock %}

{% block styles %}
<style>
  .cpa-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
  .cpa-card {
    background: var(--cp-bg);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    box-shadow: var(--cp-shadow);
    display: flex; flex-direction: column; height: 100%;
    padding: 1.1rem 1.15rem;
    transition: box-shadow .15s ease, transform .15s ease;
  }
  .cpa-card:hover { box-shadow: var(--cp-shadow-lg); transform: translateY(-2px); }
  .cpa-icon {
    align-items: center; background: var(--cp-primary-soft); border-radius: var(--cp-radius);
    color: var(--cp-primary); display: inline-flex; font-size: 1.35rem;
    height: 2.75rem; justify-content: center; width: 2.75rem;
  }
  .cpa-name { color: var(--cp-neutral); font-size: 1.02rem; font-weight: 600; margin: 0; }
  .cpa-vendor { color: var(--cp-neutral); font-size: .78rem; opacity: .7; }
  .cpa-desc { color: var(--cp-neutral); font-size: .875rem; opacity: .85; flex: 1 1 auto; }
  .cpa-tag {
    background: var(--cp-bg-subtle); border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-pill); color: var(--cp-neutral);
    font-size: .72rem; padding: .12rem .55rem; white-space: nowrap;
  }
  .cpa-tag--heavy { border-color: var(--cp-danger); color: var(--cp-danger); }
  .cpa-tag--info { border-color: var(--cp-info); color: var(--cp-info); }
  .cpa-filters .btn { border-radius: var(--cp-radius-pill); }
  .cpa-empty { color: var(--cp-neutral); opacity: .7; padding: 2.5rem 0; text-align: center; }
</style>
{% endblock %}

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

  {{ catalogue|json_script:"cpAppsCatalogue" }}
  {{ websites|json_script:"cpAppsWebsites" }}

  <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Applications</h1>
      <p class="mb-0 small" style="color: var(--cp-neutral); opacity: .75;">
        One-click installs for your websites. CloudPanel downloads each application
        straight from its vendor over HTTPS, creates the database and hands the
        files to the site's own system user.
      </p>
    </div>
    <a href="/apps/installed" class="btn btn-outline-secondary btn-sm">
      <i class="fas fa-list-check me-1"></i>Installed applications
    </a>
  </div>

  <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="row g-2 align-items-center mb-3">
    <div class="col-md-5">
      <div class="input-group">
        <span class="input-group-text"><i class="fas fa-magnifying-glass"></i></span>
        <input type="search" class="form-control" ng-model="search"
               placeholder="Search applications…" aria-label="Search applications">
      </div>
    </div>
    <div class="col-md-7 cpa-filters d-flex flex-wrap gap-1 justify-content-md-end">
      <button type="button" class="btn btn-sm"
              ng-class="category === '' ? 'btn-primary' : 'btn-outline-secondary'"
              ng-click="setCategory('')">All</button>
      <button type="button" class="btn btn-sm" ng-repeat="cat in categories"
              ng-class="category === cat.slug ? 'btn-primary' : 'btn-outline-secondary'"
              ng-click="setCategory(cat.slug)">
        <i class="me-1" ng-class="cat.icon"></i><span ng-bind="cat.name"></span>
      </button>
    </div>
  </div>

  <div class="cpa-grid" ng-cloak>
    <div class="cpa-card" ng-repeat="app in applications | filter:matches">
      <div class="d-flex align-items-center gap-3 mb-2">
        <span class="cpa-icon"><i ng-class="app.icon"></i></span>
        <div class="min-w-0">
          <p class="cpa-name" ng-bind="app.name"></p>
          <span class="cpa-vendor" ng-bind="app.vendor + ' · ' + app.licence"></span>
        </div>
      </div>

      <p class="cpa-desc mb-3" ng-bind="app.description"></p>

      <div class="d-flex flex-wrap gap-1 mb-3">
        <span class="cpa-tag" ng-bind="'v' + app.version"></span>
        <span class="cpa-tag" ng-bind="'PHP ' + app.minPhp + '+'"></span>
        <span class="cpa-tag" ng-show="app.needsDatabase">Database</span>
        <span class="cpa-tag cpa-tag--info" ng-show="app.needsComposer">Needs Composer</span>
        <span class="cpa-tag cpa-tag--heavy" ng-show="app.heavy">
          <i class="fas fa-weight-hanging me-1"></i>Heavy
        </span>
        <span class="cpa-tag" ng-show="app.checksumPinned">
          <i class="fas fa-shield-halved me-1"></i>Checksum pinned
        </span>
      </div>

      <div class="d-flex gap-2">
        <a class="btn btn-primary btn-sm flex-grow-1"
           ng-href="{$ installHref(app) $}">
          <i class="fas fa-download me-1"></i>
          <span ng-bind="app.delegateUrl ? 'Open installer' : 'Install'"></span>
        </a>
        <a class="btn btn-outline-secondary btn-sm" ng-href="{$ app.docsUrl $}"
           target="_blank" rel="noopener noreferrer" ng-show="app.docsUrl"
           title="Vendor documentation">
          <i class="fas fa-book"></i>
        </a>
      </div>
    </div>
  </div>

  <div class="cpa-empty" ng-show="!(applications | filter:matches).length" ng-cloak>
    <i class="fas fa-box-open fa-2x mb-2 d-block"></i>
    Nothing matches that search.
  </div>

  <p class="small mt-4 mb-0" style="color: var(--cp-neutral); opacity: .7;">
    Heavy applications are checked against this server's RAM, free disk and required
    services before anything is downloaded, so you find out about a missing
    OpenSearch in a second rather than halfway through a 100&nbsp;MB install.
  </p>
</div>
{% endblock %}

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