{% extends "baseTemplate/index.html" %}
{% load static %}
{# Per-version extension list: enable/disable, install/remove from the repo. #}

{% block title %}PHP extensions{% endblock %}

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

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-solid fa-puzzle-piece"></i> Extensions</h1>
      <p class="cp-page-head__sub">Enable, disable, install or remove extensions for one PHP build.</p>
    </div>
  </div>

  <div class="cp-card">
    <div class="cp-card__body">
      <div class="cp-form-grid">
        <div>
          <label class="cp-label" for="cpExtVersion">PHP version</label>
          <select class="cp-select" id="cpExtVersion" ng-model="phpVersion" ng-change="load()">
            <option value="">Select a version&hellip;</option>
            {% for version in installedVersions %}
              <option value="{{ version }}">{{ version }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
    </div>
  </div>

  <div class="cp-alert cp-alert--danger" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fa-solid fa-triangle-exclamation"></i>
    <p ng-bind="errorMessage"></p>
  </div>

  <div class="cp-card" ng-show="phpVersion" ng-cloak>
    <div class="cp-card__head">
      <h2 class="cp-card__title"><i class="fa-solid fa-toggle-on"></i> Installed extensions</h2>
    </div>
    <div class="cp-card__body cp-card__body--flush">
      <div class="cp-empty" ng-show="!busy && extensionList.length === 0">
        <i class="fa-solid fa-puzzle-piece"></i>
        <h4>No extensions found</h4>
      </div>
      <div class="cp-table-wrap" ng-show="extensionList.length">
        <table class="cp-table">
          <thead>
            <tr>
              <th scope="col">Extension</th>
              <th scope="col">State</th>
              <th scope="col" style="text-align:right">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="ext in extensionList track by ext.name">
              <td><code ng-bind="ext.name"></code></td>
              <td>
                <span class="cp-badge" ng-class="ext.enabled ? 'cp-badge--success' : 'cp-badge--warning'"
                      ng-bind="ext.enabled ? 'Enabled' : 'Disabled'"></span>
              </td>
              <td>
                <div class="cp-table__actions">
                  <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-disabled="busy"
                          ng-click="toggle(ext)">
                    <span ng-bind="ext.enabled ? 'Disable' : 'Enable'"></span>
                  </button>
                  <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-disabled="busy"
                          ng-if="ext.removable" ng-click="removePackage(ext)">
                    <i class="fa-solid fa-trash-can"></i> Remove
                  </button>
                  <span class="text-muted small" ng-if="!ext.removable"
                        title="Not a separately installable/removable apt package for this build.">
                    Built-in
                  </span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="cp-card" ng-show="phpVersion && availablePackages.length" ng-cloak>
    <div class="cp-card__head">
      <h2 class="cp-card__title"><i class="fa-solid fa-cloud-arrow-down"></i> Available in the repo</h2>
      <p class="cp-card__sub">Not installed yet, but offered by the distro's apt cache for this build.</p>
    </div>
    <div class="cp-card__body cp-card__body--flush">
      <div class="cp-table-wrap">
        <table class="cp-table">
          <tbody>
            <tr ng-repeat="pkg in availablePackages track by pkg">
              <td><code ng-bind="pkg"></code></td>
              <td style="text-align:right">
                <button type="button" class="cp-btn cp-btn--primary cp-btn--sm" ng-disabled="busy"
                        ng-click="installPackage(pkg)">
                  <i class="fa-solid fa-circle-plus"></i> Install
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>
{% endblock %}

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