# --
# Copyright (C) 2001-2019 OTRS AG, https://otrs.com/
# --
# This software comes with ABSOLUTELY NO WARRANTY. For details, see
# the enclosed file COPYING for license information (GPL). If you
# did not receive this file, see https://www.gnu.org/licenses/gpl-3.0.txt.
# --
## nofilter(TidyAll::Plugin::OTRS::TT::ScriptUsage)

<div class="MainBox ARIARoleMain">
    <div class="ClearLeft"></div>
    <div class="Headline">
        <h1 title="[% Config("FAQ::FAQHook") %]: [% Data.Number | html %] &ndash; [% Data.Title | html %]">
            [% Config("FAQ::FAQHook") %]: [% Data.Number %] <span>&mdash;</span> [% Data.Title | html %]
        </h1>
    </div>

    <ul class="BreadCrumb">
[% RenderBlockStart("FAQPathCategoryElement") %]
        <li>
            <a href="[% Env("Baselink") %]Action=AgentFAQExplorer;CategoryID=[% Data.CategoryID | uri %];Nav=[% Data.Nav | uri %]">
                [% Data.Name | html %]
            </a>
        </li>
[% RenderBlockEnd("FAQPathCategoryElement") %]
[% RenderBlockStart("FAQPathItemElement") %]
        <li>[% Data.Title | html %]</li>
[% RenderBlockEnd("FAQPathItemElement") %]
    </ul>

    <div class="LayoutFixedSidebar SidebarLast">
        <div class="SidebarColumn">
            <div class="WidgetSimple">
                <div class="Header">
                    <h2>[% Translate("FAQ Information") | html %]</h2>
                </div>
                <div class="Content">
                    <fieldset class="TableLike FixedLabelSmall">
                        <label>[% Translate("Category") | html %]:</label>
                        <p class="Value" title="[% Translate(Data.CategoryName) | html %]">[% Translate(Data.CategoryName, "18") | html %]</p>
                        <div class="Clear"></div>
                    </fieldset>
                    <fieldset class="TableLike FixedLabelSmall">
                        <label>[% Translate("Keywords") | html %]:</label>
                        <p class="Value">
[% RenderBlockStart("Keywords") %]
                            <a href="[% Env("Baselink") %]Action=AgentFAQSearch;Subaction=Search;Keyword=[% Data.Keyword | uri %]" title="[% Data.Keyword | html %]">[% Data.Keyword | html %]</a>
[% RenderBlockEnd("Keywords") %]
                        </p>
                        <div class="Clear"></div>
                    </fieldset>
                    <fieldset class="TableLike FixedLabelSmall">
                        <label>[% Translate("State") | html %]:</label>
                        <p class="Value" title="[% Translate(Data.State) | html %]">[% Translate(Data.State, "25") | html %]</p>
                        <div class="Clear"></div>

                        <label>[% Translate("Validity") | html %]:</label>
                        <p class="Value" title="[% Translate(Data.Valid) | html %]">[% Translate(Data.Valid, "25") | html %]</p>
                        <div class="Clear"></div>
[% RenderBlockStart("Language") %]
                        <label>[% Translate("Language") | html %]:</label>
                        <p class="Value" title="[% Translate(Data.Language) | html %]">[% Translate(Data.Language, "18") | html %]</p>
                        <div class="Clear"></div>
[% RenderBlockEnd("Language") %]

[% RenderBlockStart("ViewApproval") %]
                        <label>[% Translate("Approval") | html %]:</label>
                        <p class="Value" title="[% Translate(Data.Approval) | html %]">[% Translate(Data.Approval, "18") | html %]</p>
                        <div class="Clear"></div>
[% RenderBlockEnd("ViewApproval") %]

# show faq dynamic fields
[% RenderBlockStart("FAQDynamicField") %]
                        <label>[% Translate(Data.Label) | html %]:</label>
                        <p class="Value">
[% RenderBlockStart("FAQDynamicFieldLink") %]
                            <span title="[% Data.Title | html %]"><a href="[% Data.Link | Interpolate %]" target="_blank" class="DynamicFieldLink">[% Data.Value %]</a></span>
[% RenderBlockEnd("FAQDynamicFieldLink") %]
[% RenderBlockStart("FAQDynamicFieldPlain") %]
                            <span title="[% Data.Title | html %]">[% Data.Value %]</span>
[% RenderBlockEnd("FAQDynamicFieldPlain") %]
                        </p>
                        <div class="Clear"></div>
[% RenderBlockEnd("FAQDynamicField") %]

# 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
#[% RenderBlockStart("FAQDynamicField_Field1") %]
#                        <label>[% Translate(Data.Label) | html %]:</label>
#                        <p class="Value">
#[% RenderBlockStart("FAQDynamicField_Field1_Link") %]
#                            <span title="[% Data.Title | html %]"><a href="[% Data.Link | Interpolate %]" target="_blank">[% Data.Value %]</a></span>
#[% RenderBlockEnd("FAQDynamicField_Field1_Link") %]
#[% RenderBlockStart("FAQDynamicField_Field1_Plain") %]
#                            <span title="[% Data.Title | html %]">[% Data.Value %]</span>
#[% RenderBlockEnd("FAQDynamicField_Field1_Plain") %]
#                        </p>
#[% RenderBlockEnd("FAQDynamicField_Field1") %]
#[% RenderBlockStart("FAQDynamicField_Field2") %]
#                        <label>[% Translate(Data.Label) | html %]:</label>
#                        <p class="Value">
#[% RenderBlockStart("FAQDynamicField_Field2_Link") %]
#                            <span title="[% Data.Title | html %]"><a href="[% Data.Link | Interpolate %]" target="_blank">[% Data.Value %]</a></span>
#[% RenderBlockEnd("FAQDynamicField_Field2_Link") %]
#[% RenderBlockStart("FAQDynamicField_Field2_Plain") %]
#                            <span title="[% Data.Title | html %]">[% Data.Value %]</span>
#[% RenderBlockEnd("FAQDynamicField_Field2_Plain") %]
#                        </p>
#[% RenderBlockEnd("FAQDynamicField_Field2") %]

[% RenderBlockStart("ViewRating") %]
                        <label>[% Translate("Rating") | html %]:</label>
                        <div class="Value" title="[% Translate("Rating") | html %] [% Data.VoteResult %]%">

[% RenderBlockStart("RateStars") %]
                            <div>
                                <span class="RateStar"><i class="fa fa-star"></i></span>
                            </div>
[% RenderBlockEnd("RateStars") %]
[% RenderBlockStart("RateStarsCount") %]
                            <div class="RateStarText">
                                [% Data.Stars | html %] [% Translate("out of 5") | html %]
                            </div>
[% RenderBlockEnd("RateStarsCount") %]
                        </div>
                        <div class="Clear"></div>
[% RenderBlockEnd("ViewRating") %]

[% RenderBlockStart("ViewVotes") %]
                        <label>[% Translate("Votes") | html %]:</label>
                        <p class="Value" title="[% Translate(Data.Votes) | html %]">[% Translate(Data.Votes, "18") | html %]</p>
[% RenderBlockEnd("ViewVotes") %]
[% RenderBlockStart("ViewNoVotes") %]
                        <label>[% Translate("Votes") | html %]:</label>
                        <p class="Value" title="[% Translate("No votes found!") | html %]">[% Translate("No votes found! Be the first one to rate this FAQ article.") | html %]</p>
[% RenderBlockEnd("ViewNoVotes") %]

                        <div class="Clear"></div>

                        <label>[% Translate("Created") | html %]:</label>
                        <p class="Value">[% Data.Created | Localize("TimeShort") %]  ([% Data.CreatedByUser %])</p>
                        <div class="Clear"></div>

                        <label>[% Translate("Changed") | html %]:</label>
                        <p class="Value">[% Data.Changed | Localize("TimeShort") %]  ([% Data.ChangedByUser %])</p>
                        <div class="Clear"></div>
                    </fieldset>
                </div>
            </div>

[% RenderBlockStart("LinkTableSimple") %]
            <div class="WidgetSimple DontPrint">
                <div class="Header">
                    <h2>[% Translate("Linked Objects") | html %]</h2>
                </div>
                <div class="Content">
                    [% Data.LinkTableStrg %]
                </div>
            </div>
[% RenderBlockEnd("LinkTableSimple") %]

        </div>
        <div class="ContentColumn">
            <div class="WidgetSimple">
                <div class="Content">
                    <div class="ActionRow">
                        <ul class="Actions">
[% RenderBlockStart("MenuItem") %]
                            <li>
                                <a href="[% Env("Baselink") %][% Data.Link | Interpolate %]" id="[% Data.MenuID | html %]" class="[% Data.Class | html %]" [% Data.LinkParam %] title="[% Translate(Data.Description) | html %]">[% Translate(Data.Name) | html %]</a>
                            </li>
[% RenderBlockEnd("MenuItem") %]

                        </ul>
                        <div class="Clear"></div>
                    </div>
                </div>
            </div>
            <div class="SpacingTop"></div>

            <div id="FAQBody">

[% RenderBlockStart("AttachmentHeader") %]
                <div class="WidgetSimple">
                    <div class="Header">
                        <h2>[% Translate("Attachments") | html %]:</h2>
                        <div class="Clear"></div>
                    </div>
                    <div class="ArticleFAQContent">
                        <div class="message">

[% RenderBlockStart("AttachmentRow") %]
                            <span class="DownloadAttachment" title="[% Translate("Download Attachment") | html %]">
                                <a href="[% Env("Baselink") %]Action=[% Env("Action") %];Subaction=DownloadAttachment;ItemID=[% Data.ItemID | uri %];FileID=[% Data.FileID | uri %]">
                                    [% Data.Filename | html %]
                                </a>
                                , [% Data.Filesize | html %]
                            </span>
                            <br/>
[% RenderBlockEnd("AttachmentRow") %]

                        </div>
                    </div>
                </div>
[% RenderBlockEnd("AttachmentHeader") %]

[% RenderBlockStart("BrowserLinkMessage") %]
# Show info, that links within the iframe must be clicked with strg/cmd/shift (depending on the used browser and os)
# to open the links in a new window without the security permissions given to the iframe
                <div class="FAQMessageBrowser">
                    <p>
        [% Translate("To open links in the following description blocks, you might need to press Ctrl or Cmd or Shift key while clicking the link (depending on your browser and OS).") | html %]
                    </p>
                    <a class="Close" title="[% Translate("Close this message") | html %]" href="#"><i class="fa fa-times"></i></a>
                </div>
[% RenderBlockEnd("BrowserLinkMessage") %]

[% RenderBlockStart("FAQContent") %]
                <div class="WidgetSimple">
                    <div class="Header">
                        <div class="WidgetAction Toggle">
                            <a href="#" title="[% Translate("Show or hide the content") | html %]"><i class="fa fa-caret-right"></i><i class="fa fa-caret-down"></i></a>
                        </div>
                        <h2>
                            [% Translate(Data.Caption) | html %]
                            <span class="FAQStateName">([% Translate(Data.StateName) | html %])</span>
                        </h2>
                    </div>
                    <div class="Content">
[% RenderBlockStart("FAQContentHTML") %]
# execute IFrame JS asynchronously. Otherwise it could happen before our API was loaded
# the following JS code must be within the template, otherwise it could happen, that also this code itself is not loaded yet
<script>
function CheckIFrameHeight(IFrameID) {
    if (typeof FAQ === 'object' && typeof FAQ.Agent === 'object' && typeof FAQ.Agent.FAQZoom === 'object') {
        FAQ.Agent.FAQZoom.IframeAutoHeight($('#' + IFrameID));
    }
    else {
        window.setTimeout(function () {
            CheckIFrameHeight(IFrameID);
        }, 500);
    }
}
</script>
                        <div>
# Use the HTML5 sandbox attribute to prevent plugins and scripts from being executed in the browser.
# 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 ms-allow-popups allow-popups-to-escape-sandbox" class="FAQField" id="IframeFAQ[% Data.Field | html %]" onload="window.setTimeout( function (){ CheckIFrameHeight('IframeFAQ[% Data.Field | html %]'); }, 500);" src="[% Env("Baselink") %]Action=AgentFAQZoom;Subaction=HTMLView;ItemID=[% Data.ItemID | html %];Field=[% Data.Field | html %];[% Env("SessionName") | html %]=[% Env("SessionID") | html %]"></iframe>
                        </div>
[% RenderBlockEnd("FAQContentHTML") %]
[% RenderBlockStart("FAQContentPlain") %]
                        <div class="ArticleFAQContent">
                            <div class="message">
                                [% Data.Content %]
                            </div>
                        </div>
[% RenderBlockEnd("FAQContentPlain") %]
                    </div>
                </div>
[% RenderBlockEnd("FAQContent") %]

[% RenderBlockStart("FAQVoting") %]
                <div class="WidgetSimple">
                    <div class="Header">
                        <div class="WidgetAction Toggle">
                            <a href="#" title="[% Translate("Show or hide the content") | html %]"><i class="fa fa-caret-right"></i><i class="fa fa-caret-down"></i></a>
                        </div>
                        <h2>[% Translate("Rating") | html %]</h2>
                    </div>
                    <div class="FAQVoting Content" id="FAQVoting">
                        <div class="ArticleFAQContent">
                            <p class="Center">[% Translate("How helpful was this article? Please give us your rating and help to improve the FAQ Database. Thank You!") | html %]</p>

                            <form action="[% Env("CGIHandle") %]" method="post" enctype="multipart/form-data" name="FAQVote" class="FAQVoteForm">
                                <ul class="RateButtons">
                                    <li>[% Translate("not helpful") | html %]</li>
[% RenderBlockStart("FAQVotingRateRow") %]
                                    <li id="RateButton[% Data.Value %]">
                                        <span class="RateButton RateUnChecked">
                                            <i class="fa fa-star-o"></i>
                                            <i class="fa fa-star"></i>
                                            [% Data.Title | html %]
                                        </span>
                                    </li>
[% RenderBlockEnd("FAQVotingRateRow") %]
                                    <li>[% Translate("very helpful") | html %]</li>
                                </ul>
                                <br class="Clear" />

                                <button type="submit" class="Primary CallForAction Hidden" id="RateSubmitButton" name="btn" value="[% Translate("Vote") | html %]"><span><i class="fa fa-check-square-o"></i> [% Translate("Vote") | html %]</span></button>
                                <input type="hidden" name="Action" value="AgentFAQZoom"/>
                                <input type="hidden" name="Subaction" value="Vote"/>
                                <input type="hidden" name="CategoryID" value="[% Data.CategoryID | html %]"/>
                                <input type="hidden" name="ItemID" value="[% Data.ItemID | html %]"/>
                                <input type="hidden" name="Rate" value="" id="RateValue"/>
                            </form>
                        </div>
                    </div>
                </div>
[% RenderBlockEnd("FAQVoting") %]

            </div>
            <div class="Clear"></div>
[% RenderBlockStart("LinkTableComplex") %]
            <div class="Content">
                [% Data.LinkTableStrg %]
            </div>
[% RenderBlockEnd("LinkTableComplex") %]

        </div>
        <div class="Clear"></div>
    </div>
</div>