{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
Per-mailbox autoresponder (vacation), backed by a Dovecot Pigeonhole Sieve
"vacation" script written into the mailbox's own Maildir home. Ownership is
enforced server-side on every AJAX call, so this page only ever shows and
edits a mailbox the caller actually owns.
{% endcomment %}

{% block title %}Autoresponders{% endblock %}

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

  <div class="mb-4">
    <h1 class="h4 mb-1">Autoresponders</h1>
    <p class="text-muted mb-0 small">
      Reply automatically to mail sent to one mailbox, for a fixed date range.
    </p>
  </div>

  {% if not domains %}
    <div class="alert alert-info">
      <i class="fas fa-circle-info me-1"></i>
      There are no domains available to you yet.
    </div>
  {% else %}

  <div class="card mb-4">
    <div class="card-body">
      <div class="row g-3 align-items-end">
        <div class="col-md-4">
          <label class="form-label" for="cpDomain">Domain</label>
          <select class="form-select" id="cpDomain" ng-model="domain" ng-change="loadMailboxes()">
            {% for entry in domains %}
              <option value="{{ entry }}">{{ entry }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-5">
          <label class="form-label" for="cpMailbox">Mailbox</label>
          <select class="form-select" id="cpMailbox" ng-model="email"
                  ng-options="m for m in mailboxes" ng-change="load()">
          </select>
        </div>
        <div class="col-md-3">
          <div class="alert mb-0 py-2 px-3"
               ng-class="state.enabled ? 'alert-warning' : 'alert-secondary'" ng-cloak>
            <span ng-bind="state.enabled ? 'Currently ON' : 'Currently OFF'"></span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card" ng-show="email" ng-cloak>
    <div class="card-body">
      <form novalidate ng-submit="save()">
        <div class="form-check form-switch mb-3">
          <input type="checkbox" class="form-check-input" id="cpEnabled" ng-model="state.enabled">
          <label class="form-check-label" for="cpEnabled">Enable autoresponder</label>
        </div>

        <div class="mb-3">
          <label class="form-label" for="cpSubject">Subject</label>
          <input type="text" class="form-control" id="cpSubject" ng-model="state.subject"
                 maxlength="{{ maxSubject }}" placeholder="Out of office" required>
        </div>

        <div class="mb-3">
          <label class="form-label" for="cpBody">Message</label>
          <textarea class="form-control" id="cpBody" rows="6" ng-model="state.body"
                    maxlength="{{ maxBody }}"
                    placeholder="I am away and will reply when I am back."
                    required></textarea>
        </div>

        <div class="row g-3">
          <div class="col-md-4">
            <label class="form-label" for="cpStart">Start date (optional)</label>
            <input type="date" class="form-control" id="cpStart" ng-model="state.start">
          </div>
          <div class="col-md-4">
            <label class="form-label" for="cpEnd">End date (optional)</label>
            <input type="date" class="form-control" id="cpEnd" ng-model="state.end">
          </div>
          <div class="col-md-4">
            <label class="form-label" for="cpDays">Reply once every (days)</label>
            <input type="number" class="form-control" id="cpDays" ng-model="state.days"
                   min="{{ minDays }}" max="{{ maxDays }}">
            <div class="form-text">
              The same sender is not replied to again until this many days pass.
            </div>
          </div>
        </div>

        <div class="mt-4 d-flex gap-2">
          <button type="submit" class="btn btn-primary" ng-disabled="busy">
            <i class="fas fa-floppy-disk me-1"></i>
            <span ng-bind="busy ? 'Saving…' : 'Save'"></span>
          </button>
          <button type="button" class="btn btn-outline-danger" ng-disabled="busy"
                  ng-click="clear()">
            <i class="fas fa-eraser me-1"></i>Turn off and clear
          </button>
        </div>
      </form>
    </div>
  </div>

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

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