{% extends "baseTemplate/index.html" %}
{% load static %}
{# Installed lsphp builds, the configured default, and 'Install PHP version'. #}

{% block title %}PHP versions{% endblock %}

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

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-solid fa-code"></i> PHP versions</h1>
      <p class="cp-page-head__sub">
        Every lsphp build installed on this server, its extensions and the
        version new websites default to.
      </p>
    </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">
    <div class="cp-card__head">
      <h2 class="cp-card__title"><i class="fa-solid fa-list"></i> Installed builds</h2>
      <p class="cp-card__sub">The default is offered first when a new website is created.</p>
    </div>
    <div class="cp-card__body cp-card__body--flush">
      <div class="cp-empty" ng-show="!busy && installed.length === 0">
        <i class="fa-solid fa-box-open"></i>
        <h4>No lsphp build detected</h4>
        <p>Install one below to get started.</p>
      </div>
      <div class="cp-table-wrap" ng-show="installed.length">
        <table class="cp-table">
          <thead>
            <tr>
              <th scope="col">Version</th>
              <th scope="col">Default</th>
              <th scope="col" style="text-align:right">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="version in installed track by version">
              <td><code ng-bind="version"></code></td>
              <td>
                <span class="cp-badge cp-badge--success" ng-show="version === defaultVersion">
                  <i class="fa-solid fa-star"></i> Default
                </span>
              </td>
              <td>
                <div class="cp-table__actions">
                  <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm"
                          ng-hide="version === defaultVersion"
                          ng-disabled="busy" ng-click="makeDefault(version)">
                    Make default
                  </button>
                  <a class="cp-btn cp-btn--ghost cp-btn--sm"
                     href="/managephp/extensions?phpVersion={$ version $}">
                    <i class="fa-solid fa-puzzle-piece"></i> Extensions
                  </a>
                  <a class="cp-btn cp-btn--ghost cp-btn--sm"
                     href="/managephp/editPhpIni?phpVersion={$ version $}">
                    <i class="fa-solid fa-sliders"></i> php.ini
                  </a>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="cp-card" ng-show="installable.length" ng-cloak>
    <div class="cp-card__head">
      <h2 class="cp-card__title"><i class="fa-solid fa-circle-down"></i> Install PHP version</h2>
      <p class="cp-card__sub">Fetches the interpreter plus common extensions (mysql, opcache, curl, intl).</p>
    </div>
    <div class="cp-card__body">
      <div class="cp-form-grid">
        <div>
          <label class="cp-label" for="cpInstallVersion">Version</label>
          <select class="cp-select" id="cpInstallVersion" ng-model="installVersion">
            <option value="">Select a version&hellip;</option>
            <option ng-repeat="version in installable track by version" value="{$ version $}">{$ version $}</option>
          </select>
        </div>
        <div style="align-self:end">
          <button type="button" class="cp-btn cp-btn--primary" ng-disabled="!installVersion || installing"
                  ng-click="install()">
            <i class="fa-solid fa-download"></i>
            <span ng-bind="installing ? 'Installing…' : 'Install'"></span>
          </button>
        </div>
      </div>

      <div ng-show="installing || installLines.length" ng-cloak style="margin-top:16px">
        <div class="cp-joblog__head" style="display:flex;justify-content:space-between">
          <span ng-bind="installLabel"></span>
          <span ng-bind="installPct + '%'"></span>
        </div>
        <div cp-progress="installPct"></div>
        <pre class="cp-joblog__out" style="max-height:180px;overflow:auto"><span ng-repeat="line in installLines track by $index">{$ line $}
</span></pre>
      </div>
    </div>
  </div>

</div>
{% endblock %}

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