{% extends 'base/layout.html' %}

{% block title %}Maintenance Mode — {{ object }}{% endblock %}

{% block content %}
<div class="row">
  <div class="col col-md-8 col-lg-6">

    <div class="card">
      <h5 class="card-header">
        <i class="mdi mdi-pause-circle-outline text-warning"></i>
        Maintenance Mode — {{ object_type }}: {{ object }}
      </h5>
      <div class="card-body">

        {% if object.maintenance_mode %}
        <div class="alert alert-warning mb-3">
          <i class="mdi mdi-pause-circle"></i>
          <strong>{{ object_type }}</strong> is currently <strong>in maintenance mode</strong>{% if object.maintenance_enabled_at %}, enabled {{ object.maintenance_enabled_at|date:"N j, Y H:i" }}{% endif %}{% if object.maintenance_enabled_by %} by {{ object.maintenance_enabled_by }}{% endif %}.
          {% if object.maintenance_notes %}<br><em>Notes: {{ object.maintenance_notes }}</em>{% endif %}
        </div>
        {% else %}
        <p class="text-muted mb-3">This {{ object_type|lower }} is not currently in maintenance mode.</p>
        {% endif %}

        <form method="post">
          {% csrf_token %}

          <div class="mb-3">
            <label class="form-label fw-semibold">Maintenance Mode</label>
            <div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="maintenance_mode"
                       id="mm_enable" value="1" {% if default_enabled %}checked{% endif %}>
                <label class="form-check-label" for="mm_enable">Enable</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="maintenance_mode"
                       id="mm_disable" value="0" {% if not default_enabled %}checked{% endif %}>
                <label class="form-check-label" for="mm_disable">Disable</label>
              </div>
            </div>
          </div>

          <div class="mb-4" id="mm-notes-field">
            <label for="mm_notes" class="form-label fw-semibold">
              Notes <span class="text-muted fw-normal">(optional)</span>
            </label>
            <textarea name="maintenance_notes" id="mm_notes" class="form-control" rows="3"
                      placeholder="Describe the reason for this maintenance window...">{% if object.maintenance_mode %}{{ object.maintenance_notes }}{% endif %}</textarea>
          </div>

          <button type="submit" class="btn btn-warning">
            <i class="mdi mdi-check"></i> Apply
          </button>
          <a href="{{ return_url }}" class="btn btn-outline-secondary ms-2">Cancel</a>
        </form>

      </div>
    </div>

  </div>
</div>

<script>
(function () {
  var enableRadio  = document.getElementById('mm_enable');
  var notesWrapper = document.getElementById('mm-notes-field');
  function syncVisibility() {
    notesWrapper.style.display = enableRadio.checked ? '' : 'none';
  }
  document.querySelectorAll('[name="maintenance_mode"]').forEach(function (r) {
    r.addEventListener('change', syncVisibility);
  });
  syncVisibility();
}());
</script>
{% endblock %}