{% extends "baseTemplate/index.html" %}
{% load static %}
{# Hostname, time zone and server IP addresses -- admin only. #}

{% block title %}Server settings{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Server settings</h1>
      <p class="text-muted mb-0 small">Hostname, time zone and this server's addresses.</p>
    </div>
  </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="alert alert-warning py-2 px-3" ng-show="notes.length" ng-cloak role="alert">
    <div ng-repeat="note in notes"><i class="fas fa-circle-info me-1"></i><span ng-bind="note"></span></div>
  </div>

  <div class="row g-3">
    <div class="col-12 col-xl-6">
      <div class="card h-100">
        <div class="card-header fw-semibold">Hostname</div>
        <div class="card-body">
          <p class="small text-muted">
            The system's fully-qualified host name. Changing it does not by itself
            reissue this panel's TLS certificate.
          </p>
          <div class="mb-3">
            <label class="form-label small mb-1" for="cpHostname">Hostname</label>
            <input type="text" class="form-control cp-mono" id="cpHostname"
                   ng-model="newHostname" autocomplete="off" spellcheck="false"
                   placeholder="cp.example.com">
          </div>
          <button type="button" class="btn btn-primary" ng-disabled="busy || !newHostname || newHostname === hostname"
                  ng-click="saveHostname()">
            <i class="fas fa-floppy-disk me-1"></i>Save hostname
          </button>
          <p class="small text-muted mt-2 mb-0">Current: <span class="cp-mono" ng-bind="hostname"></span></p>
        </div>
      </div>
    </div>

    <div class="col-12 col-xl-6">
      <div class="card h-100">
        <div class="card-header fw-semibold">Time zone</div>
        <div class="card-body">
          <p class="small text-muted">Applies to the system clock, cron schedules and log timestamps.</p>
          <div class="mb-3">
            <label class="form-label small mb-1" for="cpTimeZone">Time zone</label>
            <select class="form-select" id="cpTimeZone" ng-model="timeZone"
                    ng-options="tz for tz in timeZones"></select>
          </div>
          <button type="button" class="btn btn-primary" ng-disabled="busy || !timeZone"
                  ng-click="saveTimeZone()">
            <i class="fas fa-floppy-disk me-1"></i>Save time zone
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="card mt-3">
    <div class="card-header fw-semibold">Server addresses</div>
    <div class="card-body">
      <p class="mb-2">
        <span class="text-muted small">Public address</span><br>
        <span class="cp-mono" ng-bind="serverIPs.public"></span>
      </p>
      <div class="table-responsive">
        <table class="table table-sm align-middle mb-0">
          <thead>
            <tr><th scope="col">Interface</th><th scope="col">State</th><th scope="col">Addresses</th></tr>
          </thead>
          <tbody ng-cloak>
            <tr ng-repeat="iface in serverIPs.interfaces">
              <td class="cp-mono" ng-bind="iface.name"></td>
              <td>
                <span class="badge" ng-class="iface.isUp ? 'text-bg-success' : 'text-bg-secondary'"
                      ng-bind="iface.isUp ? 'Up' : 'Down'"></span>
              </td>
              <td class="cp-mono">
                <span ng-repeat="addr in iface.addresses">{$ addr.address $}<span ng-show="!$last">, </span></span>
              </td>
            </tr>
            <tr ng-show="!serverIPs.interfaces.length">
              <td colspan="3" class="text-muted text-center py-3">No interfaces reported.</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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