{% extends "baseTemplate/index.html" %}
{% load static %}
{# Child domain listing, filterable by parent website. #}

{% block title %}Child domains{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Child domains</h1>
      <p class="text-muted mb-0 small">
        <span ng-bind="total"></span> add-on and sub domain(s).
      </p>
    </div>
    <a href="/websites/createChildDomain" class="btn btn-primary btn-sm">
      <i class="fas fa-plus me-1"></i>Create child domain
    </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="card">
    <div class="card-body">

      <div class="row g-2 align-items-center mb-3">
        <div class="col-md-5">
          <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 child domains…"
                   ng-model="search" ng-change="searchChanged()"
                   ng-model-options="{debounce: 300}" aria-label="Search child domains">
          </div>
        </div>
        <div class="col-md-4">
          <select class="form-select" ng-model="masterDomain" ng-change="load(1)"
                  aria-label="Filter by parent website">
            <option value="">Every parent website</option>
            {% for site in websites %}
              <option value="{{ site }}">{{ site }}</option>
            {% endfor %}
          </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">Child domain</th>
              <th scope="col">Parent</th>
              <th scope="col">Document root</th>
              <th scope="col">PHP</th>
              <th scope="col">SSL</th>
              <th scope="col">Status</th>
              {% if canDelete == 1 %}<th scope="col" class="text-end">Actions</th>{% endif %}
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="child in childDomains" ng-cloak>
              <td class="fw-semibold" ng-bind="child.domain"></td>
              <td ng-bind="child.master"></td>
              <td class="font-monospace small text-muted" ng-bind="child.path"></td>
              <td ng-bind="child.phpSelection"></td>
              <td>
                <span class="badge rounded-pill"
                      ng-class="child.ssl === 1 ? 'text-bg-success' : 'text-bg-secondary'"
                      ng-bind="child.ssl === 1 ? 'Active' : 'None'"></span>
              </td>
              <td>
                <span class="badge rounded-pill"
                      ng-class="child.state === 1 ? 'text-bg-success' : 'text-bg-warning'"
                      ng-bind="child.stateLabel"></span>
              </td>
              {% if canDelete == 1 %}
                <td class="text-end">
                  <button type="button" class="btn btn-sm btn-outline-danger"
                          ng-click="destroy(child)" ng-disabled="busy"
                          aria-label="Delete child domain">
                    <i class="fas fa-trash"></i>
                  </button>
                </td>
              {% endif %}
            </tr>
            <tr ng-show="!busy && childDomains.length === 0" ng-cloak>
              <td colspan="7" class="text-center text-muted py-4">
                No child domains 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="Child domain 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 %}