{% extends "baseTemplate/index.html" %}
{% load static %}
{# Panel display name, contact addresses and outgoing mail -- admin only. #}

{% block title %}Panel settings{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Panel settings</h1>
      <p class="text-muted mb-0 small">Display name, contact addresses and outgoing notification mail.</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="row g-3">
    <div class="col-12 col-xl-6">
      <div class="card h-100">
        <div class="card-header fw-semibold">Branding &amp; contact</div>
        <div class="card-body">
          <div class="mb-3">
            <label class="form-label small mb-1" for="cpPanelDisplayName">Panel display name</label>
            <input type="text" class="form-control" id="cpPanelDisplayName"
                   ng-model="settings.panelDisplayName" maxlength="100" placeholder="CloudPanel">
          </div>
          <div class="mb-3">
            <label class="form-label small mb-1" for="cpCompanyName">Company name</label>
            <input type="text" class="form-control" id="cpCompanyName"
                   ng-model="settings.companyName" maxlength="150" placeholder="a1hosting.net">
          </div>
          <div class="mb-3">
            <label class="form-label small mb-1" for="cpSupportEmail">Support email</label>
            <input type="email" class="form-control" id="cpSupportEmail"
                   ng-model="settings.supportEmail" placeholder="support@a1hosting.net">
            <div class="form-text">Shown to customers, and used as the From: address for outgoing mail.</div>
          </div>
          <div class="mb-1">
            <label class="form-label small mb-1" for="cpNotificationEmail">Notification email</label>
            <input type="email" class="form-control" id="cpNotificationEmail"
                   ng-model="settings.notificationEmail" placeholder="ops@a1hosting.net">
            <div class="form-text">Where the panel's own alerts (service down, disk full, ...) are sent.</div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-12 col-xl-6">
      <div class="card h-100">
        <div class="card-header fw-semibold">Outgoing notification mail</div>
        <div class="card-body">
          <div class="mb-3">
            <label class="form-label small mb-1" for="cpMailMode">Transport</label>
            <select class="form-select" id="cpMailMode" ng-model="settings.mailMode">
              <option value="postfix">Local Postfix (127.0.0.1:25, no authentication)</option>
              <option value="relay">SMTP relay</option>
            </select>
          </div>

          <div ng-show="settings.mailMode === 'relay'" ng-cloak>
            <div class="row g-2 mb-2">
              <div class="col-8">
                <label class="form-label small mb-1" for="cpSmtpHost">Relay host</label>
                <input type="text" class="form-control cp-mono" id="cpSmtpHost"
                       ng-model="settings.smtpHost" placeholder="smtp.a1hosting.net">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="cpSmtpPort">Port</label>
                <input type="number" class="form-control" id="cpSmtpPort"
                       ng-model="settings.smtpPort" min="1" max="65535">
              </div>
            </div>
            <div class="mb-2">
              <label class="form-label small mb-1" for="cpSmtpUsername">Username</label>
              <input type="text" class="form-control" id="cpSmtpUsername"
                     ng-model="settings.smtpUsername" autocomplete="off">
            </div>
            <div class="mb-2">
              <label class="form-label small mb-1" for="cpSmtpPassword">
                Password
                <span class="text-muted" ng-show="hasSmtpPassword">(leave blank to keep the current one)</span>
              </label>
              <input type="password" class="form-control" id="cpSmtpPassword"
                     ng-model="settings.smtpPassword" autocomplete="new-password">
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="cpSmtpTLS" ng-model="settings.smtpUseTLS">
              <label class="form-check-label small" for="cpSmtpTLS">Use STARTTLS</label>
            </div>
          </div>
        </div>
        <div class="card-footer d-flex gap-2">
          <button type="button" class="btn btn-primary" ng-disabled="busy" ng-click="save()">
            <i class="fas fa-floppy-disk me-1"></i>Save settings
          </button>
          <button type="button" class="btn btn-outline-secondary" ng-disabled="testing" ng-click="sendTestEmail()">
            <i class="fas fa-paper-plane me-1"></i>
            <span ng-bind="testing ? 'Sending…' : 'Send test email'"></span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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