{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} WordPress installer. Same polling contract as website creation: the view
   returns a status path immediately and wp-cli reports progress into it. {% endcomment %}

{% block title %}Install WordPress{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Install WordPress</h1>
      <p class="text-muted mb-0 small">
        Creates a database, downloads core, writes <code>wp-config.php</code>
        with fresh salts and runs the installer — all as the site's own user.
      </p>
    </div>
    <a href="/websites/listWordPress" class="btn btn-outline-secondary btn-sm">
      <i class="fa-brands fa-wordpress me-1"></i>Installed sites
    </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-4">
    <div class="col-lg-8">
      <div class="card">
        <div class="card-body">
          <form novalidate ng-submit="install()">

            <div class="row g-3">
              <div class="col-md-7">
                <label class="form-label" for="cpWpDomain">Website or child domain</label>
                <select class="form-select" id="cpWpDomain" ng-model="wp.domain"
                        ng-disabled="running" required>
                  <option value="">Choose a domain…</option>
                  {% for site in websites %}
                    <option value="{{ site }}">{{ site }}</option>
                  {% endfor %}
                </select>
              </div>

              <div class="col-md-5">
                <label class="form-label" for="cpWpPath">Sub-directory</label>
                <div class="input-group">
                  <span class="input-group-text">/</span>
                  <input type="text" class="form-control" id="cpWpPath"
                         ng-model="wp.installPath" ng-disabled="running"
                         placeholder="(document root)" autocomplete="off">
                </div>
                <div class="form-text">Leave blank to install at the docroot.</div>
              </div>

              <div class="col-12">
                <label class="form-label" for="cpWpTitle">Site title</label>
                <input type="text" class="form-control" id="cpWpTitle"
                       ng-model="wp.title" ng-disabled="running"
                       placeholder="My new site" autocomplete="off" required>
              </div>

              <div class="col-md-4">
                <label class="form-label" for="cpWpUser">Administrator login</label>
                <input type="text" class="form-control" id="cpWpUser"
                       ng-model="wp.adminUser" ng-disabled="running"
                       autocomplete="off" required>
                <div class="form-text">Letters, digits and underscore.</div>
              </div>

              <div class="col-md-4">
                <label class="form-label" for="cpWpPass">Administrator password</label>
                <div class="input-group">
                  <input class="form-control" id="cpWpPass"
                         ng-attr-type="{$ showPassword ? 'text' : 'password' $}"
                         ng-model="wp.adminPassword" ng-disabled="running"
                         autocomplete="new-password" required>
                  <button class="btn btn-outline-secondary" type="button"
                          ng-click="showPassword = !showPassword"
                          aria-label="Show or hide the password">
                    <i class="fas" ng-class="showPassword ? 'fa-eye-slash' : 'fa-eye'"></i>
                  </button>
                  <button class="btn btn-outline-secondary" type="button"
                          ng-click="generatePassword()" aria-label="Generate a password">
                    <i class="fas fa-wand-magic-sparkles"></i>
                  </button>
                </div>
                <div class="form-text">At least 8 characters.</div>
              </div>

              <div class="col-md-4">
                <label class="form-label" for="cpWpEmail">Administrator email</label>
                <input type="email" class="form-control" id="cpWpEmail"
                       ng-model="wp.adminEmail" ng-disabled="running"
                       autocomplete="off" required>
              </div>
            </div>

            <div class="mt-4">
              <button type="submit" class="btn btn-primary" ng-disabled="running">
                <span ng-show="running" class="spinner-border spinner-border-sm me-1"
                      role="status" aria-hidden="true"></span>
                <i class="fa-brands fa-wordpress me-1" ng-hide="running"></i>
                <span ng-bind="running ? 'Installing…' : 'Install WordPress'"></span>
              </button>
            </div>
          </form>
        </div>
      </div>

      <div class="card mt-4" ng-show="started" ng-cloak>
        <div class="card-body">
          <h2 class="h6 mb-3">
            <i class="fas fa-gears me-1 text-primary"></i>
            Progress for <code ng-bind="targetUrl"></code>
          </h2>
          <div class="progress" role="progressbar" aria-label="Installation progress"
               style="height: 1.25rem;">
            <div class="progress-bar progress-bar-striped"
                 ng-class="{'progress-bar-animated': running,
                            'bg-danger': failed, 'bg-success': done && !failed}"
                 ng-style="{width: progress + '%'}">
              <span ng-bind="progress + '%'"></span>
            </div>
          </div>
          <p class="mt-3 mb-0 small"
             ng-class="failed ? 'text-danger' : 'text-muted'"
             ng-bind="statusText"></p>

          <div class="mt-3" ng-show="done && !failed">
            <a class="btn btn-sm btn-success" ng-href="{$ targetUrl $}/wp-admin/"
               target="_blank" rel="noopener">
              <i class="fas fa-arrow-up-right-from-square me-1"></i>Open wp-admin
            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-4">
      <div class="card h-100">
        <div class="card-body">
          <h2 class="h6 mb-3">
            <i class="fas fa-circle-info me-1 text-primary"></i>What happens
          </h2>
          <ol class="small text-muted ps-3 mb-3">
            <li class="mb-2">A database and a dedicated database user are created
              with generated names and a random password.</li>
            <li class="mb-2">wp-cli downloads core into the chosen directory as
              the site's system user, so file ownership stays correct and
              updates from wp-admin keep working.</li>
            <li class="mb-2"><code>wp-config.php</code> is written and its
              security salts are shuffled.</li>
            <li>The installer runs with the administrator account you entered.</li>
          </ol>
          <p class="small text-muted mb-0">
            Store the administrator password now — the panel does not keep it.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  window.CP_WP_DEFAULTS = { email: "{{ defaultEmail|escapejs }}" };
</script>
<script src="{% static 'websiteFunctions/websiteFunctions.js' %}"></script>
{% endblock %}