{% load i18n %}

<form method="post" action="{% url 'helpdesk:update' ticket.id %}" enctype="multipart/form-data" id="ticket-respond-form">
  {% csrf_token %}
  <div class="row">
    <div class="col-12 col-md-8 col-lg-5">

      {% if preset_replies %}
        <div class="mb-3">
          <label class="form-label" for="id_preset">{% translate "Use a Pre-set Reply (Optional)" %}</label>
          <select class="form-select" name="preset" id="id_preset">
            <option value=''>------</option>
            {% for preset in preset_replies %}<option value="{{ preset.id }}">{{ preset.name }}</option>{% endfor %}
          </select>
          <span class="form-text">
            {% translate "Selecting a pre-set reply will over-write your comment below. You can then modify the pre-set reply to your liking before saving this update." %}
          </span>
        </div>
      {% endif %}
      {# Comment text box #}
      <div class="mb-3">
        <label class="form-label" for="commentBox">{% translate "Comment / Resolution" %}</label>
        <textarea class="form-control" rows="3" name="comment" id="commentBox">{{ xform.comment }}</textarea>
        {% url "helpdesk:help_context" as context_help_url %}
        {% blocktranslate %}
      <p class="form-text">
        You can insert ticket and queue details in your message. 
        For more information, see the <a href="{{ context_help_url }}" target="_blank">context help page.</a>
      </p>
    {% endblocktranslate %}
      </div>
      {# Status radio buttons #}
      <fieldset class="mb-3">
        <span class="form-label">{% translate "New Status" %}</span>
        {% for status_choice in ticket.get_allowed_status_flow %}
          <div class="form-check">
            <input class="form-check-input"
                   type="radio"
                   name="new_status"
                   value="{{ status_choice.0 }}"
                   id="st_{{ status_choice.1|lower }}"
                   {% if not ticket.can_be_resolved %}disabled{% endif %}
                   {% if ticket.status == status_choice.0 %}checked{% endif %} />
            {# djlint:off #}
        <label for="st_{{ status_choice.1|lower }}"
               class="form-check-label radio-inline {% if ticket.status == status_choice.0 %}active {% endif %}">
                {{ status_choice.1 }}
        </label>
        {# djlint: on #}
          </div>
        {% endfor %}
        {% if not ticket.can_be_resolved %}
          <div class="form-text">{% translate "This ticket cannot be resolved or closed until the tickets it depends on are resolved." %}</div>
        {% endif %}
      </fieldset>
      {# Public update checkbox #}
      {% if helpdesk_settings.HELPDESK_UPDATE_PUBLIC_DEFAULT %}
        <input type="hidden" name="public" value="1" />
      {% else %}
        <div class="form-check form-switch mb-3">
          <input class="form-check-input" type="checkbox" name="public" value="1" id="id_public" switch checked />
          <label class="form-label" for="id_public">{% translate "Is this update public? (Optional)" %}</label>
          <div class="form-text">{% translate "If this is public, the submitter will be e-mailed your comment or resolution." %}</div>
        </div>
      {% endif %}
      {% if notification_recipients %}
        <div class="mb-3" id="notification-recipients">
          <small class="form-text text-muted">
            {% translate "The following addresses will be notified:" %}
            {{ notification_recipients|join:", " }}
          </small>
        </div>
      {% endif %}
      {# Time spent widget #}
      {% if helpdesk_settings.HELPDESK_ENABLE_TIME_SPENT_ON_TICKET and user.is_staff %}
        <div class="mb-3">
          <label class="form-label" for="id_time_spent">{% translate "Time spent (Optional)" %}</label>
          <input class="form-control"
                 name="time_spent"
                 type="time"
                 value="{% if form.errors %}{{ xform.time_spent }}{% endif %}" />
        </div>
      {% endif %}
    </div>
  </div>
  {# Optional form content #}
  {# Three toggle buttons #}
  <div class="d-grid gap-2 d-md-block mb-3">
    <a class="btn bg-body-tertiary border"
       data-bs-toggle="collapse"
       href="#collapseDetails"
       role="button"
       aria-expanded="false"
       aria-controls="collapseDetails">{% translate "Update ticket details" %}</a>
    {% if ticket.checklists.exists %}
      <a class="btn bg-body-tertiary border"
         data-bs-toggle="collapse"
         href="#collapseChecklists"
         role="button"
         aria-expanded="false"
         aria-controls="collapseChecklists">{% translate "Update checklists" %}</a>
    {% endif %}
    {% if helpdesk_settings.HELPDESK_ENABLE_ATTACHMENTS %}
      <a class="btn bg-body-tertiary border"
         data-bs-toggle="collapse"
         href="#collapseAttachments"
         role="button"
         aria-expanded="false"
         aria-controls="collapseAttachments">{% translate "Attach File(s)" %}</a>
    {% endif %}
  </div>
  {# Extra Ticket Details form #}
  <div class="collapse my-3" id="collapseDetails">
    <div class="row">
      <div class="col-12 col-lg-8">
        <div class="card card-body border-0 bg-body-tertiary">
          <div class="row g-3 mb-3">
            <div class="col-12">
              <label class="form-label" for="id_title">{% translate "Title" %}</label>
              <input class="form-control" name="title" value="{{ ticket.title|escape }}" />
            </div>
            <div class="col-md-3">
              <label class="form-label" for="id_owner">{% translate "Owner" %}</label>
              <select class="form-select" id="id_owner" name="owner">
                <option value="0">{% trans "Unassigned" %}</option>
                {% for u in assignable_users %}
                  <option value="{{ u.id }}" {% if u.id == ticket.assigned_to.id %} selected{% endif %}>{{ u }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-3">
              <label class="form-label" for="id_priority">{% translate "Priority" %}</label>
              <select class="form-select" id="id_priority" name="priority">
                {% for p in priorities %}
                  {% if p.0 == ticket.priority %}
                    <option value="{{ p.0 }}" selected="selected">{{ p.1 }}</option>
                  {% else %}
                    <option value="{{ p.0 }}">{{ p.1 }}</option>
                  {% endif %}
                {% endfor %}
              </select>
            </div>
            {% if queues|length > 1 %}
              <div class="col-md-3">
                <label class="form-label" for="id_queue">{% translate "Queue" %}</label>
                <select class="form-select" id="id_queue" name="queue">
                  {% for queue_id, queue_name in queues %}
                    <option value="{{ queue_id }}"
                            {% if queue_id == ticket.queue.id %}
                              selected{% endif %}>{{ queue_name }}</option>
                  {% endfor %}
                </select>
              </div>
            {% else %}
              <input type="hidden" id="id_queue" name="queue" value="{{ ticket.queue.id }}" />
            {% endif %}
            <div class="col-md-3">
              <label class="form-label" for="id_due_date">{% translate "Due on" %}</label>
              {{ form.due_date }}
            </div>
            <div class="col-6">
              {# ticket merge form #}
              {{ customfields_form }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  {# Checklists #}
  {% if ticket.checklists.exists %}
    <div class="collapse" id="collapseChecklists">
      <div class="row">
        {% for checklist in ticket.checklists.all %}
          <div class="col-12 col-md-4">
            <div class="card border-0 mb-3">
              <ul class="list-group">
                <li class="list-group-item">
                  <h6 class="mb-0">{{ checklist }}</h6>
                </li>
                {% for task in checklist.tasks.all %}
                  <li class="list-group-item"
                      {% if task.completion_date %}
                        title="{% translate "Completed on" %} {{ task.completion_date }}"
                      {% endif %}>
                    <div class="form-check">
                      <input class="form-check-input"
                             type="checkbox"
                             id="task-{{ task.id }}"
                             name="checklist-{{ checklist.id }}"
                             value="{{ task.id }}"
                             {% if task.completion_date %}
                               checked{% endif %} />
                      <label class="form-check-label" for="task-{{ task.id }}">{{ task }}</label>
                    </div>
                  </li>
                {% endfor %}
              </ul>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  {% endif %}
  {# Attachments #}
  {% if helpdesk_settings.HELPDESK_ENABLE_ATTACHMENTS %}
    {% if form.errors.attachment %}<small class="error">{{ form.errors.attachment }}</small>{% endif %}
    <div class="collapse mb-3" id="collapseAttachments">
      <div class="row">
        <div class="col-12 col-md-8 col-lg-5">
          <div id="attachment-drop-zone"
               style="border: 2px dashed #ccc; border-radius: 6px; padding: 1rem; transition: border-color 0.2s, background-color 0.2s;">
            <div class="add_file_fields_wrap">
              <div class="mb-3">
                <label class="form-label" for="file0">{% translate "Browse..." %}</label>
                <input class="form-control" type="file" name="attachment" id="file0" multiple />
              </div>
            </div>
            <button class="add_file_field_button btn btn-link btn-sm"
                    type="button">{% translate "Add Another File" %}</button>
            <p id="attachment-drop-status" class="small mt-2 mb-0" aria-live="polite"></p>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
  <button class="btn btn-success" type="submit">{% translate "Save" %}</button>
</form>