{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} WordPress installations with their core version and update state. The update
   check runs wp-cli per row, so the page size stays small by default. {% endcomment %}

{% block title %}WordPress sites{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">WordPress sites</h1>
      <p class="text-muted mb-0 small">
        <span ng-bind="total"></span> installation(s) managed by this panel.
      </p>
    </div>
    {% if canInstall == 1 %}
      <a href="/websites/installWordPress" class="btn btn-primary btn-sm">
        <i class="fa-brands fa-wordpress me-1"></i>Install WordPress
      </a>
    {% endif %}
  </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="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 title, domain or path…"
                   ng-model="search" ng-change="searchChanged()"
                   ng-model-options="{debounce: 300}" aria-label="Search WordPress sites">
          </div>
        </div>
        <div class="col-md-3">
          <select class="form-select" ng-model="pageSize" ng-change="load(1)"
                  aria-label="Rows per page">
            <option ng-value="10">10 per page</option>
            <option ng-value="25">25 per page</option>
            <option ng-value="50">50 per page</option>
          </select>
        </div>
        <div class="col-md-3 text-md-end">
          <button type="button" class="btn btn-outline-secondary btn-sm"
                  ng-click="load(page)" 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">Site</th>
              <th scope="col">Domain</th>
              <th scope="col">Path</th>
              <th scope="col">Version</th>
              <th scope="col">Updates</th>
              <th scope="col">Admin</th>
              <th scope="col" class="text-end">Manage</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="site in wpSites" ng-cloak>
              <td class="fw-semibold" ng-bind="site.title"></td>
              <td>
                <a ng-href="https://{$ site.domain $}" target="_blank" rel="noopener"
                   class="text-decoration-none" ng-bind="site.domain"></a>
              </td>
              <td class="font-monospace small text-muted" ng-bind="site.path"></td>
              <td>
                <span class="badge rounded-pill text-bg-secondary"
                      ng-bind="site.version || 'unknown'"></span>
              </td>
              <td>
                <span class="badge rounded-pill"
                      ng-class="{'text-bg-success': site.updateState === 'current',
                                 'text-bg-warning': site.updateState !== 'current'
                                                    && site.updateState !== 'unknown',
                                 'text-bg-secondary': site.updateState === 'unknown'}"
                      ng-bind="site.updateState === 'current' ? 'Up to date' : site.updateState"></span>
              </td>
              <td>
                <span ng-bind="site.WPusername"></span>
                <div class="small text-muted" ng-bind="site.WPemail"></div>
              </td>
              <td class="text-end">
                <a class="btn btn-sm btn-outline-primary"
                   ng-href="/websites/wordPressDetail/{$ site.id $}">
                  <i class="fas fa-sliders me-1"></i>Manage
                </a>
              </td>
            </tr>
            <tr ng-show="!busy && wpSites.length === 0" ng-cloak>
              <td colspan="7" class="text-center text-muted py-4">
                No WordPress installations yet.
              </td>
            </tr>
            <tr ng-show="busy" ng-cloak>
              <td colspan="7" class="text-center text-muted py-4">
                <span class="spinner-border spinner-border-sm me-1" role="status"
                      aria-hidden="true"></span>Checking for updates…
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <nav class="d-flex flex-wrap justify-content-between align-items-center mt-3 gap-2"
           ng-show="pages > 1" ng-cloak aria-label="WordPress site pages">
        <span class="small text-muted">
          Page <span ng-bind="page"></span> of <span ng-bind="pages"></span>
        </span>
        <div class="btn-group btn-group-sm">
          <button type="button" class="btn btn-outline-secondary"
                  ng-click="load(page - 1)" ng-disabled="page <= 1 || busy">
            <i class="fas fa-chevron-left"></i> Previous
          </button>
          <button type="button" class="btn btn-outline-secondary"
                  ng-click="load(page + 1)" ng-disabled="page >= pages || busy">
            Next <i class="fas fa-chevron-right"></i>
          </button>
        </div>
      </nav>

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

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