# --
# CustomerTicketZoom.dtl - provides HTML TicketZoom for CustomerTicketZoom.pm
# Copyright (C) 2001-2012 OTRS AG, http://otrs.org/
# --
# $Id: CustomerTicketZoom.dtl,v 1.116.2.2 2012-08-17 08:52:41 mg Exp $
# --
# This software comes with ABSOLUTELY NO WARRANTY. For details, see
# the enclosed file COPYING for license information (AGPL). If you
# did not receive this file, see http://www.gnu.org/licenses/agpl.txt.
# --
<div id="MainBox" class="TicketZoom ARIARoleMain">
<!-- dtl:block:Back -->
    <div class="ActionRow">
        <ul class="Tabs">
            <li><a href="$Env{"Baselink"}$Env{"LastScreenOverview"}">&larr; $Text{"Back"}</a></li>
        </ul>
        <div class="Clear"></div>
    </div>
<!-- dtl:block:Back -->
    <div class="Content">
        <div class="TicketHeader">
            <h2 title="$QData{"Title"}">
<!-- dtl:block:PriorityFlag -->
                <div class="Flag" title="$Text{"$Data{"Priority"}"}"><span class="PriorityID-$QData{"PriorityID"}">$Text{"$Data{"Priority"}"}</span></div>
<!-- dtl:block:PriorityFlag -->
                $QData{"Title","65"}
                <span class="TicketHook">$QData{"TicketNumber"}</span>
            </h2>
            <ul id="Metadata">
<!-- dtl:block:Type -->
                <li><span class="Key">$Text{"Type"}:</span> <span title="$QData{"Type"}">$QData{"Type","18"}</span></li>
<!-- dtl:block:Type -->
<!-- dtl:block:Service -->
                <li><span class="Key">$Text{"Service"}:</span> <span title="$Text{"$Data{"Service"}"}">$Text{"$Data{"Service"}","18"}</span></li>
<!-- dtl:block:Service -->
<!-- dtl:block:SLA -->
                <li><span class="Key">$Text{"SLA"}:</span> <span title="$Text{"$Data{"SLA"}"}">$Text{"$Data{"SLA"}","18"}</span></li>
<!-- dtl:block:SLA -->
<!-- dtl:block:State -->
                <li><span class="Key">$Text{"State"}:</span> <span title="$Text{"$Data{"State"}"}">$Text{"$Data{"State"}","18"}</span></li>
<!-- dtl:block:State -->
<!-- dtl:block:Priority -->
                <li><span class="Key">$Text{"Priority"}:</span> <span title="$Text{"$Data{"Priority"}"}">$Text{"$Data{"Priority"}","18"}</span></li>
<!-- dtl:block:Priority -->
<!-- dtl:block:Queue -->
                <li><span class="Key">$Text{"Queue"}:</span> <span title="$QData{"Queue"}">$QData{"Queue","18"}</span></li>
<!-- dtl:block:Queue -->
<!-- dtl:block:Owner -->
                <li><span class="Key">$Text{"Owner"}:</span> <span title="$QData{"Owner"}">$QData{"Owner"}</span></li>
<!-- dtl:block:Owner -->
<!-- dtl:block:Responsible -->
                <li><span class="Key">$Text{"Responsible"}:</span> <span title="$QData{"Responsible"}">$QData{"Responsible"}</span></li>
<!-- dtl:block:Responsible -->

# show ticket dynamic fields
<!-- dtl:block:TicketDynamicField -->
                <li>
                    <span class="Key">$Text{"$Data{"Label"}"}:</span>
                    <span title="$QData{"Title"}">$Data{"Value"}</span>
                </li>
<!-- dtl:block:TicketDynamicField -->
# example of how to use fixed dynamic field blocks for customizations
# Note: Field1 and Field2 are the names of the fields and had to be replaced with the actual
# field names
#<!-- dtl:block:TicketDynamicField_Field1 -->
#                <li>
#                    <span class="Key">$Text{"$Data{"Label"}"}:</span>
#                    <span title="$QData{"Title1"}">$Data{"Value"}</span>
#                </li>
#<!-- dtl:block:TicketDynamicField_Field1 -->
#<!-- dtl:block:TicketDynamicField_Field2 -->
#                <li>
#                    <span class="Key">$Text{"$Data{"Label"}"}:</span>
#                    <span title="$QData{"Title2"}">$Data{"Value"}</span>
#                </li>
#<!-- dtl:block:TicketDynamicField_Field2 -->

<!-- dtl:block:Print -->
                <li><a href="$Env{"Baselink"}Action=CustomerTicketPrint;TicketID=$LQData{"TicketID"}" class="Print AsPopup" title="$Text{"Print"}">$Text{"Print"}</a></li>
<!-- dtl:block:Print -->
            </ul>
            <div class="Clear"></div>
        </div>
        <form action="$Env{"CGIHandle"}#FollowUp" method="post" enctype="multipart/form-data" name="compose" class="Validate PreventMultipleSubmits">
            <input type="hidden" name="Action" value="CustomerTicketZoom" />
            <input type="hidden" name="Subaction" value="Store" />
            <input type="hidden" name="TicketID" value="$QData{"TicketID"}" />
            <input type="hidden" name="ArticleID" value="$QData{"ArticleID"}" />
            <input type="hidden" name="FormID" value="$QData{"FormID"}" />
            <ul id="Messages">
<!-- dtl:block:Article -->
                <li class="$QData{"SenderType"}-$QData{"ArticleType"} $QData{"Class"}">
                    <div class="MessageHeader">

<!-- dtl:block:ArticleContracted -->
                        <h3><a href="$Env{"Baselink"}Action=$Env{"Action"};TicketNumber=$LQData{"TicketNumber"};ArticleID=$LQData{"ArticleID"}">$QData{"FromRealname","60"} &ndash; <span title="$Text{"Expand article"}...">$QData{"Subject","120"}</span></a></h3>
<!-- dtl:block:ArticleContracted -->

<!-- dtl:block:ArticleExpanded -->
                        <h3><a href="$Env{"Baselink"}Action=$Env{"Action"};TicketNumber=$LQData{"TicketNumber"};ArticleID=$LQData{"ArticleID"}">$QData{"FromRealname","60"} &ndash; <span title="$QData{"Subject"}">$QData{"Subject","120"}</span></a></h3>
<!-- dtl:block:ArticleExpanded -->

                        <span class="Age" title="$TimeLong{"$QData{"Created"}"}">$Data{"Age"}</span>
                        <div class="Clear"></div>
                    </div>
                    <input type="hidden" name="ArticleState" value="untouched" />
                    <div class="MessageBody">
                        <div class="Details SeperatorRow">
<!-- dtl:block:ArticleRow -->
                            <div>
                                <div class="Label">$Text{"$Data{"Key"}"}:</div> <span title="$QData{"Value"}">$QData{"Realname","100"}</span>
                                <div class="Clear"></div>
                            </div>
<!-- dtl:block:ArticleRow -->
                            <div>
                                <div class="Label">$Text{"Subject"}:</div> <span title="$QData{"Subject"}">$QData{"Subject","150"}</span>
                                <div class="Clear"></div>
                            </div>

# show article dynamic fields
<!-- dtl:block:ArticleDynamicField -->
                            <div>
                                <div class="Label" title="$QData{"Label"}">$Text{"$Data{"Label"}"}:</div>
                                <span title="$QData{"Title"}">$Data{"Value"}</span>
                                <div class="Clear"></div>
                            </div>
<!-- dtl:block:ArticleDynamicField -->
# example of how to use fixed dynamic field blocks for customizations
# Note: Field1 and Field2 are the names of the fields and had to be replaced with the actual
# field names
#<!-- dtl:block:ArticleDynamicField_Field1 -->
#                            <div>
#                                <div class="Label" title="$QData{"Label"}">$Text{"$Data{"Label"}"}:</div>
#                                <span title="$QData{"Title"}">$Data{"Value"}</span>
#                                <div class="Clear"></div>
#                            </div>
#<!-- dtl:block:ArticleDynamicField_Field1 -->
#<!-- dtl:block:ArticleDynamicField_Field2 -->
#                            <div>
#                                <div class="Label" title="$QData{"Label"}">$Text{"$Data{"Label"}"}:</div>
#                                <span title="$QData{"Title"}">$Data{"Value"}</span>
#                                <div class="Clear"></div>
#                            </div>
#<!-- dtl:block:ArticleDynamicField_Field2 -->

<!-- dtl:block:ArticleAttachment -->
                            <div class="Attachments">
                                <div class="Label">$Text{"$Data{"Key"}"}:</div>
                                <div>
<!-- dtl:block:ArticleAttachmentRow -->
                                    <span class="DownloadAttachment" title="$QData{"Filename"} - $QData{"Filesize"}">
<!-- dtl:block:ArticleAttachmentRowLink -->
                                        <a href="$Data{"Link"}" $Data{"Target"} title="$Text{"$Data{"Action"}"}">$QData{"Filename"}</a>, $QData{"Filesize"}
<!-- dtl:block:ArticleAttachmentRowLink -->
<!-- dtl:block:ArticleAttachmentRowNoLink -->
                                        $QData{"Filename"}, $QData{"Filesize"}
<!-- dtl:block:ArticleAttachmentRowNoLink -->
                                    </span>
<!-- dtl:block:ArticleAttachmentRow -->
                                </div>
                                <div class="Clear"></div>
                            </div>
<!-- dtl:block:ArticleAttachment -->
                        </div>
                        <div class="MessageContent">
<!-- dtl:block:BodyPlain -->
                            $Data{"BodyNote"}
                            <div class="ArticleBody">
                                $Data{"Body"}
                            </div>
<!-- dtl:block:BodyPlain -->
<!-- dtl:block:BodyHTMLLoad -->
# Use the HTML5 sandbox attribute to prevent plugins and scripts from being executed in the browser.
# Use IE's (non-standard) security attribute to achieve something similar in older IE browsers. Append session info to URL because IE will not send cookies.
# Set 'allow-popups' to allow IE10+ to open links. ref: http://www.w3.org/html/wg/wiki/ChangeProposals/sandbox_allow_popups
                            <iframe sandbox="allow-same-origin allow-popups" security="restricted" title="about:blank" frameborder="0" id="VisibleFrame" src="$Env{"Baselink"}Action=CustomerTicketAttachment;Subaction=HTMLView;ArticleID=$QData{"ArticleID"};FileID=$QData{"AttachmentIDOfHTMLBody"};$QEnv{"SessionName"}=$QEnv{"SessionID"}"></iframe>
<!-- dtl:block:BodyHTMLLoad -->
<!-- dtl:block:BodyHTMLPlaceholder -->
#                           <!-- Here we need to append the session info if cookies are disabled, because the layout object cannot automatically do that here, like in the other iframe (only for src attribute). -->
                            <iframe sandbox="allow-same-origin" security="restricted" src="about:blank" frameborder="0" title="$Env{"Baselink"}Action=CustomerTicketAttachment;Subaction=HTMLView;ArticleID=$QData{"ArticleID"};FileID=$QData{"AttachmentIDOfHTMLBody"};$QData{"SessionInformation"};$QEnv{"SessionName"}=$QEnv{"SessionID"}"></iframe>
<!-- dtl:block:BodyHTMLPlaceholder -->
                        </div>
                    </div>
                </li>
<!-- dtl:block:Article -->
            </ul> <!-- /Messages -->
<!-- dtl:block:FollowUp -->
            <div id="FollowUp" class="$QData{"FollowUpVisible"}">
                <div id="Messenger">
                    <input class="DontPrint" type="text" name="Subject" id="Subject" value="$QData{"Subject"}" />
<!-- dtl:block:RichText-->
                    $Include{"CustomerRichTextEditor"}
<!-- dtl:block:RichText-->
                    <textarea title="$Text{"Reply"}" id="RichText" class="RichText DontPrint Validate_RequiredRichText $QData{"RichTextInvalid"}" name="Body" rows="15" cols="$Config{"Ticket::Frontend::TextAreaNote"}">$QData{"Body"}</textarea>
                    <div id="RichTextError" class="TooltipErrorMessage">
                        <p>$Text{"This field is required."}</p>
                    </div>
                    <div id="RichTextServerError" class="TooltipErrorMessage NoJavaScriptMessage$QData{"RichTextInvalid"}">
                        <p>$Text{"This field is required."}</p>
                    </div>
                    <fieldset class="DontPrint">
                        <div id="AttachmentHolder">
                            <label for="Attachment">$Text{"Attachment"}:</label>
                            <input name="file_upload" title="Attachment" id="Attachment" type="file" size="30" />
                            <input type="hidden" id="AttachmentUpload" name="AttachmentUpload" value="0" />
<!--dtl:js_on_document_complete-->
<script type="text/javascript">//<![CDATA[
    $('#Attachment').bind('change', function (Event) {
        var $Form = $('#Attachment').closest('form');
        Core.Form.Validate.DisableValidation($Form);
        $Form.find('#AttachmentUpload').val('1').end().submit();
    });
//]]></script>
<!--dtl:js_on_document_complete-->

<!-- dtl:block:FollowUpAttachment -->
                            <div class="Attachment" title="$QData{"Filename"} - $QData{"Filesize"}">
                                $QData{"Filename"} ($QData{"Filesize"})
                                <button type="button" id="AttachmentDeleteButton$QData{"FileID"}" name="AttachmentDeleteButton$QData{"FileID"}" value="$Text{"Delete"}">$Text{"Delete"}</button>
                                <input type="hidden" id="AttachmentDelete$QData{"FileID"}" name="AttachmentDelete$QData{"FileID"}" />
<!--dtl:js_on_document_complete-->
<script type="text/javascript">//<![CDATA[
    $('#AttachmentDeleteButton$QData{"FileID"}').bind('click', function () {
        var $Form = $('#AttachmentDeleteButton$QData{"FileID"}').closest('form');
        $('#AttachmentDelete$QData{"FileID"}').val(1);
        Core.Form.Validate.DisableValidation($Form);
        $Form.trigger('submit');
    });
//]]></script>
<!--dtl:js_on_document_complete-->
                            </div>
<!-- dtl:block:FollowUpAttachment -->

                        </div>
<!-- dtl:block:FollowUpState -->
                        <div>
                            <label for="StateID">$Text{"Next state"}:</label> $Data{"NextStatesStrg"}
                        </div>
<!-- dtl:block:FollowUpState -->
<!-- dtl:block:FollowUpPriority -->
                        <div>
                            <label for="PriorityID">$Text{"Priority"}:</label> $Data{"PriorityStrg"}
                        </div>
<!-- dtl:block:FollowUpPriority -->
                    </fieldset>
                    <div class="ActionRow">
                        <button type="submit" value="$Text{"Submit"}">$Text{"Submit"}</button> $Text{"or"} <a id="CloseButton" href="">$Text{"Cancel"}</a>
                    </div>
                </div>
                <a id="ReplyButton" class="DontPrint" href="">$Text{"Reply"}</a>
            </div>
<!-- dtl:block:FollowUp -->
        </form>
    </div>
</div>
<!-- dtl:js_on_document_complete -->
<script type="text/javascript">
    Core.Customer.TicketZoom.Init();
    $('a.AsPopup').bind('click', function (Event) {
        Core.UI.Popup.OpenPopup($(this).attr('href'), 'TicketAction');
        return false;
    });
</script>
<!-- dtl:js_on_document_complete -->
