{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Website listing. Search and paging are server side so a reseller with a few
   thousand domains does not ship the whole tenant list to the browser. {% endcomment %}

{% block title %}Websites{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Websites</h1>
      <p class="text-muted mb-0 small">
        <span ng-bind="total"></span> website(s) you can manage.
      </p>
    </div>
    {% if canCreate == 1 %}
      <a href="/websites/createWebsite" class="btn btn-primary btn-sm">
        <i class="fas fa-plus me-1"></i>Create website
      </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 domain, owner or package…"
                   ng-model="search" ng-change="searchChanged()"
                   ng-model-options="{debounce: 300}" aria-label="Search websites">
          </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>
            <option ng-value="100">100 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">Domain</th>
              <th scope="col">Owner</th>
              <th scope="col">Package</th>
              <th scope="col">PHP</th>
              <th scope="col">SSL</th>
              <th scope="col">Status</th>
              <th scope="col" class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="site in websites" ng-cloak>
              <td>
                <a ng-href="https://{$ site.domain $}" target="_blank" rel="noopener"
                   class="text-decoration-none fw-semibold" ng-bind="site.domain"></a>
                <div class="small text-muted" ng-bind="site.adminEmail"></div>
              </td>
              <td ng-bind="site.owner"></td>
              <td ng-bind="site.package"></td>
              <td ng-bind="site.phpSelection"></td>
              <td>
                <span class="badge rounded-pill"
                      ng-class="site.ssl === 1 ? 'text-bg-success' : 'text-bg-secondary'"
                      ng-bind="site.ssl === 1 ? 'Active' : 'None'"></span>
              </td>
              <td>
                <span class="badge rounded-pill"
                      ng-class="site.state === 1 ? 'text-bg-success' : 'text-bg-warning'"
                      ng-bind="site.stateLabel"></span>
              </td>
              <td class="text-end">
                <div class="btn-group btn-group-sm" role="group"
                     aria-label="Website actions">
                  {% if canModify == 1 %}
                    <a class="btn btn-outline-secondary"
                       ng-href="/websites/manage?domain={$ site.domain $}"
                       title="Manage"><i class="fas fa-gauge-high"></i></a>
                    <a class="btn btn-outline-secondary"
                       ng-href="/websites/modifyWebsite?domain={$ site.domain $}"
                       title="Modify"><i class="fas fa-sliders"></i></a>
                  {% endif %}
                  {% if canSuspend == 1 %}
                    <button type="button" class="btn btn-outline-warning"
                            ng-click="toggleState(site)"
                            ng-attr-title="{$ site.state === 1 ? 'Suspend' : 'Unsuspend' $}">
                      <i class="fas" ng-class="site.state === 1 ? 'fa-pause' : 'fa-play'"></i>
                    </button>
                  {% endif %}
                  {% if canDelete == 1 %}
                    <a class="btn btn-outline-danger"
                       ng-href="/websites/deleteWebsite?domain={$ site.domain $}"
                       title="Delete"><i class="fas fa-trash"></i></a>
                  {% endif %}
                </div>
              </td>
            </tr>
            <tr ng-show="!busy && websites.length === 0" ng-cloak>
              <td colspan="7" class="text-center text-muted py-4">
                No websites matched.
              </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>Loading…
              </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="Website 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 %}