{% extends "./base.html" %}
{% load widget_tweaks %}
{% block plannedmaintenance_main %}
  <div class="max-w-2xl w-full pb-8">
    <div class="card card-compact bg-base-100 shadow-sm border border-base-300">
      <div class="card-body">
        <h2 class="card-title">
          {% if object.pk and object.modifiable and request.user.is_staff %}
            Edit Maintenance Task
          {% elif object.pk %}
            Maintenance Task
          {% else %}
            Create Maintenance Task
          {% endif %}
        </h2>
        {% if object.pk %}
          <div class="grid grid-cols-2 gap-x-4 gap-y-1 text-sm mb-4 p-3 bg-base-200 rounded">
            <span class="text-base-content/60">Created by</span>
            <span>{{ object.created_by }}</span>
            <span class="text-base-content/60">Created at</span>
            <span>{{ object.created|date:preferences.argus_htmx.datetime_format }}</span>
          </div>
        {% endif %}
        <form method="post"
              action="{% if object.pk %}{% url 'htmx:plannedmaintenance-update' pk=object.pk %}{% else %}{% url 'htmx:plannedmaintenance-create' %}{% endif %}">
          {% csrf_token %}
          {% if form.non_field_errors %}
            <div class="alert alert-error mb-4">
              {% for error in form.non_field_errors %}<span>{{ error }}</span>{% endfor %}
            </div>
          {% endif %}
          <div class="flex flex-col gap-4">
            {# Start time field #}
            <div class="form-control w-full">
              {% if form.start_time %}
                <label class="label" for="{{ form.start_time.auto_id }}">
                  <span class="label-text"><em>Start time</em></span>
                </label>
                {% render_field form.start_time class+="input input-bordered w-full" %}
                {% if form.start_time.errors %}
                  <div class="label">
                    {% for error in form.start_time.errors %}<span class="label-text-alt text-error">{{ error }}</span>{% endfor %}
                  </div>
                {% endif %}
              {% else %}
                <label class="label" for="disabled-start-time">
                  <span class="label-text"><em>Start time</em></span>
                </label>
                <input type="text"
                       id="disabled-start-time"
                       disabled
                       value="{{ object.start_time|date:preferences.argus_htmx.datetime_format }}"
                       class="input input-bordered w-full input-disabled" />
                {% if object.modifiable and not object.future %}
                  <div class="label">
                    <span class="label-text-alt">Can only be changed for scheduled tasks</span>
                  </div>
                {% endif %}
              {% endif %}
            </div>
            {# End time field #}
            <div class="form-control w-full">
              {% if form.end_time %}
                <label class="label" for="{{ form.end_time.auto_id }}">
                  <span class="label-text"><em>End time</em></span>
                  <button type="button" class="btn btn-link btn-xs" onclick="setEndTimeToNow()">Set to current time</button>
                </label>
                {% render_field form.end_time class+="input input-bordered w-full" placeholder="Infinite" %}
                {% if form.end_time.errors %}
                  <div class="label">
                    {% for error in form.end_time.errors %}<span class="label-text-alt text-error">{{ error }}</span>{% endfor %}
                  </div>
                {% endif %}
              {% else %}
                <label class="label" for="disabled-end-time">
                  <span class="label-text"><em>End time</em></span>
                </label>
                <input type="text"
                       id="disabled-end-time"
                       disabled
                       value="{% if object.end_time.year >= 9999 %}Infinite{% else %}{{ object.end_time|date:preferences.argus_htmx.datetime_format }}{% endif %}"
                       class="input input-bordered w-full input-disabled" />
              {% endif %}
            </div>
            {# Description field #}
            <div class="form-control w-full">
              {% if form.description %}
                <label class="label" for="{{ form.description.auto_id }}">
                  <span class="label-text"><em>Description</em></span>
                </label>
                {% render_field form.description class+="input input-bordered w-full" %}
                {% if form.description.errors %}
                  <div class="label">
                    {% for error in form.description.errors %}<span class="label-text-alt text-error">{{ error }}</span>{% endfor %}
                  </div>
                {% endif %}
              {% else %}
                <label class="label" for="disabled-description">
                  <span class="label-text"><em>Description</em></span>
                </label>
                <input type="text"
                       id="disabled-description"
                       disabled
                       value="{{ object.description|default:'-' }}"
                       class="input input-bordered w-full input-disabled" />
              {% endif %}
            </div>
            {# Filters field #}
            {% if form.filters %}
              <div class="form-control w-full [&_.choices]:w-full [&_.choices]:max-w-none">
                <label class="label" for="{{ form.filters.auto_id }}">
                  <span class="label-text"><em>Filters</em></span>
                </label>
                {{ form.filters }}
                <div class="label">
                  <span class="label-text-alt">Select filters that define incidents covered by this maintenance. Filters should include source system IDs, source types, or tags to be effective. Type at least 2 characters to search.</span>
                </div>
                {% if form.filters.errors %}
                  <div class="label">
                    {% for error in form.filters.errors %}<span class="label-text-alt text-error">{{ error }}</span>{% endfor %}
                  </div>
                {% endif %}
              </div>
              {# Filter preview #}
              <div class="form-control w-full">
                <span class="label">
                  <span class="label-text"><em>Preview</em></span>
                </span>
                <div id="filter-preview" class="px-1 py-3 min-h-[3rem]">
                  {% include "htmx/plannedmaintenance/_filter_preview.html" with no_filters=True %}
                </div>
              </div>
            {% elif object.filters.exists %}
              <div class="form-control w-full">
                <span class="label">
                  <span class="label-text"><em>Filters</em></span>
                </span>
                <div class="p-3 bg-base-200 rounded flex flex-wrap gap-1">
                  {% for filter in object.filters.all %}<span class="badge badge-primary text-xs">{{ filter.name }}</span>{% endfor %}
                </div>
              </div>
            {% endif %}
          </div>
          <div class="card-actions justify-between mt-6">
            <div>
              {% if object.pk and request.user.is_staff %}
                <a href="{% url 'htmx:plannedmaintenance-create' %}?copy_from={{ object.pk }}"
                   class="btn">Create copy</a>
              {% endif %}
            </div>
            <div class="flex gap-2">
              {% if object.pk and not object.modifiable or not request.user.is_staff %}
                <a href="{% if object.past %}{% url 'htmx:plannedmaintenance-list' tab='past' %}{% else %}{% url 'htmx:plannedmaintenance-list' %}{% endif %}"
                   class="btn">Back</a>
              {% else %}
                <button type="submit" class="btn btn-primary">
                  {% if object.pk %}
                    Save changes
                  {% else %}
                    Create
                  {% endif %}
                </button>
                <a href="{% url 'htmx:plannedmaintenance-list' %}" class="btn">Cancel</a>
              {% endif %}
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
{% endblock plannedmaintenance_main %}
{% block tail %}
  {% include "htmx/plannedmaintenance/_plannedmaintenance_form_script.html" %}
{% endblock tail %}