{% extends "helpdesk/public_base.html" %}{% load i18n humanize %}
{% load static %}
{% block helpdesk_title %}{% trans "View a Ticket" %}{% endblock %}

{% block helpdesk_body %}

<table class="table table-hover table-bordered table-striped">
<thead>
    <tr>
    <th colspan="2">
        <capiton>
            {{ ticket.ticket }} . {{ ticket.title }} [{{ ticket.get_status }}]
        </capiton>
    </th>
    </tr>
</thead>
<tbody>
    <tr><th>{% blocktrans with ticket.queue as queue_name %}Queue</th>
    <td>{{ queue_name }}{% endblocktrans %}</td></tr>
<tr>
    <th>{% trans "Submitted On" %}</th>
    <td>{{ ticket.created|date:"DATETIME_FORMAT" }} ({{ ticket.created|naturaltime }})</td>
</tr>

{% if ticket.due_date %}
    <tr>
        <th>{% trans "Due On" %}</th>
        <td>{{ ticket.due_date|date:"DATETIME_FORMAT" }} ({{ ticket.due_date|naturaltime }})</td>
    </tr>
{% endif %}

<tr>
    <th>{% trans "Submitter E-Mail" %}</th>
    <td>{{ ticket.submitter_email }}</td>
</tr>

<tr>
    <th>{% trans "Priority" %}</th>
    <td>{{ ticket.get_priority_display }}</td>
</tr>

{% for customfield in ticket.ticketcustomfieldvalue_set.all %}
    <tr>
        <th>{{ customfield.field.label }}</th>
        <td>{{ customfield.value|default:"" }}</td>
    </tr>
{% endfor %}

{% if tags_enabled %}
<tr>
    <th>{% trans "Tags" %}</th>
    <td>{{ ticket.tags }}</td>
</tr>
{% endif %}

<tr>
    <th colspan='2'>{% trans "Description" %}</th>
</tr>
<tr>
    <td colspan='2'>{{ ticket.description|force_escape|urlizetrunc:50|linebreaksbr }}</td>
</tr>

{% if ticket.resolution %}<tr>
    <th colspan='2'>{% trans "Resolution" %}{% if ticket.get_status_display == "Resolved" %} <a href='{{ ticket.ticket_url }}&close'><button type="button" class="btn btn-primary btn-xs">{% trans "Accept and Close" %}</button></a>{% endif %}</th>
</tr>
<tr>
    <td colspan='2'>{{ ticket.resolution|urlizetrunc:50|linebreaksbr }}</td>
</tr>{% endif %}
</tbody>
</table>

{% if ticket.followup_set.public_followups %}
<h3>{% trans "Follow-Ups" %}</h3>
{% load ticket_to_link %}
{% for followup in ticket.followup_set.public_followups %}
<div class='followup well card'>
    <p><b>{{ followup.title }} <span class='byline text-info'>{% if followup.user %}by {{ followup.user }}{% endif %} <span title='{{ followup.date|date:"DATETIME_FORMAT" }}'>{{ followup.date|naturaltime }}</span></span></b></p>
    {{ followup.comment|force_escape|urlizetrunc:50|num_to_link|linebreaksbr }}
    {% if followup.ticketchange_set.all %}<div class='changes'><ul>
	    {% for change in followup.ticketchange_set.all %}
	    <li>{% blocktrans with change.field as field and change.old_value as old_value and change.new_value as new_value %}Changed {{ field }} from {{ old_value }} to {{ new_value }}.{% endblocktrans %}</li>
	    {% endfor %}
    </ul></div>{% endif %}

    {% if helpdesk_settings.HELPDESK_ENABLE_ATTACHMENTS %}
    {% for attachment in followup.followupattachment_set.all %}{% if forloop.first %}<div class='attachments'><ul>{% endif %}
	    <li><a href='{{ attachment.file.url }}'>{{ attachment.filename }}</a> ({{ attachment.mime_type }}, {{ attachment.size|filesizeformat }})</li>
	    {% if forloop.last %}</ul></div>{% endif %}
    {% endfor %}
    {% endif %}
</div>
{% endfor %}
{% endif %}

<form method='post' action="{% url 'helpdesk:update' ticket.id %}" enctype='multipart/form-data'>
    <input type="hidden" name="key" value="{{ key }}" />
    <input type="hidden" name="mail" value="{{ mail }}" />

<fieldset>
    <dl>
        {% if preset_replies %}
        <dt><label for='id_preset'>{% trans "Use a Pre-set Reply" %}</label> <span class='form_optional'>{% trans "(Optional)" %}</span></dt>
        <dd><select name='preset' id='id_preset'><option value=''>------</option>{% for preset in preset_replies %}<option value='{{ preset.id }}'>{{ preset.name }}</option>{% endfor %}</select></dd>
        <dd class='form_help_text'>{% trans "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." %}</dd>
        {% endif %}

        <dt><label for='commentBox'>{% trans "Comment / Resolution" %}</label></dt>
        <dd><textarea rows='8' cols='70' name='comment' id='commentBox'></textarea></dd>
	{% url "helpdesk:help_context" as context_help_url %}
	{% blocktrans %}
        <dd class='form_help_text'>You can insert ticket and queue details in your message. For more information, see the <a href='{{ context_help_url }}'>context help page</a>.</dd>
	{% endblocktrans %}

        {% if not ticket.can_be_resolved %}<dd>{% trans "This ticket cannot be resolved or closed until the tickets it depends on are resolved." %}</dd>{% endif %}
        {% if ticket.status == 1 %}
            <input type="hidden" name="new_status" value="{{ ticket.status }}" />
        {% else %}
        <dd><div class="form-group">
        {% for status_choice in ticket.get_allowed_status_flow %}
            <label for='st_{{ status_choice.1|lower }}' class='{% if ticket.status == status_choice.0 %}active {% endif %}radio-inline'><input type='radio' name='new_status' value='{{ status_choice.0 }}' id='st_{{ status_choice.1|lower }}'{% if not ticket.can_be_resolved %} disabled='disabled'{% endif %}{% if ticket.status == status_choice.0 %} checked='checked'{% endif %}>{{ status_choice.1 }}{% if forloop.last %}{% else %} &raquo;{% endif %}</label>
        {% endfor %}
        </div></dd>
        {% endif %}

        <input type='hidden' name='public' value='1'>

    </dl>
        
{% if helpdesk_settings.HELPDESK_ENABLE_ATTACHMENTS %}
<p id='ShowFileUploadPara'><button class="btn btn-warning btn-sm"
    id='ShowFileUpload' onclick="$('#FileUpload')[0].style.display='block';return false;" >{% trans "Attach File(s) &raquo;" %}</button></p>

<div id='FileUpload' style='display: none;'>

    <dl>
        <dt><label for='id_file'>{% trans "Attach a File" %}</label></dt>
        <dd>
            <div class="add_file_fields_wrap">
                <button class="add_file_field_button btn btn-success btn-xs">{% trans "Add Another File" %}</button>
                <div><label class='btn btn-primary btn-sm btn-file'>
                        Browse... <input type="file" name='attachment' id='file0' style='display: none;'/>
                </label><span>&nbsp;</span><span id='selectedfilename0'>{% trans 'No files selected.' %}</span></div>
            </div>
        </dd>
    </dl>

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

<button class="btn btn-primary btn-lg" style="margin-bottom:10px" type='submit'>{% trans "Update This Ticket" %}</button>

{% csrf_token %}
</form>

{% if helpdesk_settings.HELPDESK_ENABLE_ATTACHMENTS %}
<script type='text/javascript' language='javascript'>
  $(document).ready(function() {

      $("#ShowFileUpload").click(function() {
          $("#FileUpload").fadeIn();
          $("#ShowFileUploadPara").hide();
      });

      // lists for file input change events, then updates the associated text label
      // with the file name selected
      $('.add_file_fields_wrap').on('fileselect', ':file', function(event, numFiles, label, browseButtonNum) {
          $("#selectedfilename"+browseButtonNum).html(label);
      });

      var x = 0;
      var wrapper         = $(".add_file_fields_wrap"); //Fields wrapper
      var add_button      = $(".add_file_field_button"); //Add button ID

      $(add_button).click(function(e){ //on add input button click
          x++;
          e.preventDefault();
          $(wrapper).append("<div><label class='btn btn-primary btn-sm btn-file'>Browse... <input type='file' name='attachment' id='file" + x + "' multiple style='display: none;'/></label><span>&nbsp;</span><span id='selectedfilename" + x + "'>{% trans 'No files selected.' %}</span></div>"); //add input box
      });
  });

  // this function listens for changes on any file input, and
  // emits the appropriate event to update the input's text.
  // Needed to have properly styled file input buttons! (this really shouldn't be this hard...)
  $(document).on('change', ':file', function() {
      var input = $(this),
          inputWidgetNum = $(this).attr('id').split("file")[1],
          numFiles = input.get(0).files ? input.get(0).files.length : 1,
          label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
      input.trigger('fileselect', [numFiles, label, inputWidgetNum]);
  });

</script>
{% endif %}

{% endblock %}
