Skip to content

Instantly share code, notes, and snippets.

@DeskWOW
Last active August 29, 2015 14:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DeskWOW/2e543c2c55c8a317251f to your computer and use it in GitHub Desktop.
Save DeskWOW/2e543c2c55c8a317251f to your computer and use it in GitHub Desktop.
Help Widget (Frontend)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
{% assign tab_count = 1 %}
{% if site.email_enabled_config %}
{% assign tab_count = tab_count | plus:1 %}
{% endif %}
{% if site.myportal_enabled and false %}
{% assign tab_count = tab_count | plus:1 %}
{% endif %}
{% capture tab_width %}{% assign tab_width = 100 | divided_by:tab_count %}{{tab_width}}%{% endcapture %}
<style>
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
outline: none;
}
.desk-external-variables {
display: none;
}
#flash {
display: none;
background-color: rgba(0, 0, 0, 0.5);
padding: 15px;
margin-bottom: 15px;
color: white;
margin: -20px -20px 20px -20px;
border-bottom: 1px solid white;
box-shadow: inset 0 3px 20px rgba(0, 0, 0, 0.25);
}
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
}
body {
margin: 20px;
background: #F4F4F4;
}
body.suspended {
overflow: hidden;
}
body, input, input, button, p, td {
font-family: Helvetica, sans-serif;
font-size: 15px;
}
.wrapper {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.button {
border-radius: 4px;
color: #2f2c68;
text-decoration: none;
padding: 8px;
display: block;
border: 1px solid rgba(0,0,0,.25);
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #dee9ed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dee9ed));
background: -webkit-linear-gradient(top, #ffffff 0%,#dee9ed 100%);
background: -o-linear-gradient(top, #ffffff 0%,#dee9ed 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#dee9ed 100%);
background: linear-gradient(to bottom, #ffffff 0%,#dee9ed 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dee9ed',GradientType=0 );
}
/* --- Tabs --- */
.tabs .tab {
width: 50%;
width: {{tab_width}};
float: left;
margin: 0;
text-align: center;
font-weight: bold;
}
.tabs .tab a {
color: #2f2c68;
text-decoration: none;
padding: 8px;
display: block;
border: 1px solid rgba(0,0,0,.25);
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #dee9ed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dee9ed));
background: -webkit-linear-gradient(top, #ffffff 0%,#dee9ed 100%);
background: -o-linear-gradient(top, #ffffff 0%,#dee9ed 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#dee9ed 100%);
background: linear-gradient(to bottom, #ffffff 0%,#dee9ed 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dee9ed',GradientType=0 );
border-left: 0;
}
.tabs .tab.active a {
background: #e0e5e7;
}
.tabs .tab:nth-child(1) a {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
border-left: 1px solid rgba(0,0,0,.25);
}
.tabs .tab:nth-last-child(2) a {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
/* -- Search -- */
.search-container {
position: relative;
margin: 15px 0;
}
.search-container i {
cursor: pointer;
display: none;
position: absolute;
right: 10px;
top: 8px;
font-size: 21px;
color: rgba(0, 0, 0, .25);
}
#q {
box-sizing: border-box;
width: 100%;
border-radius: 3px;
font-size: 17px;
padding: 8px 12px;
padding-right: 34px;
background: #FFF;
border: 1px solid #CCC;
border-top-color: #999;
}
.no-results {
display: none;
color: rgba(0, 0, 0, 0.5);
font-style: italic;
padding: 8px;
}
/* -- Index -- */
.brand,
.topic-faq {
margin-bottom: 15px;
}
.loading {
padding: 8px;
color: rgba(0,0,0,.33);
}
.brand-link {
display: block;
text-decoration: none;
font-weight: bold;
padding: 8px;
text-shadow: 1px 0 white;
color: rgba(0, 0, 0, 0.67);
}
.topic-link {
display: block;
color: #2f2c68;
text-decoration: none;
font-weight: bold;
border-top: 1px solid #d3e1e9;
border-bottom: 1px solid #d3e1e9;
background: #f5fafc;
padding: 8px;
margin-top: -1px;
}
.article-link {
display: block;
color: #2f2c68;
text-decoration: none;
border-top: 1px solid #d3e1e9;
background: #FCFEFF;
padding: 8px;
}
.article-body {
}
.article-body img {
max-width: 100%;
}
.article-body ul,
.article-body ol {
margin-left: 40px;
}
.article-container {
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-top: 1px solid #d3e1e9;
background: #FFFFFF;
overflow: hidden;
}
.article-actual {
height: 100%;
width: 100%;
box-sizing: border-box;
overflow: scroll;
padding: 60px 15px 15px 15px;
}
.article-heading {
margin-bottom: 15px;
}
.articles {
border-bottom: 1px solid #d3e1e9;
}
.articles {
/* margin-bottom: 5px; */
}
.topic.active .topic-link {
/* margin-top: 5px;*/
border-bottom: 0;
}
.articlefirst-of-type .article-link {
border-top: 0;
}
.button.go-back {
display: none;
position: fixed;
top: 15px;
left: 15px;
z-index: 10;
}
body.suspended .button.go-back {
display: inline-block;
}
/* --- Modifiers --- */
.hidden {
display: none;
}
/* --- Brand support --- */
.brand-content {
display: none;
}
/* -- Forms -- */
.input-block,
.field {
margin-bottom: 15px;
}
.input-block .label,
.field label {
display: block;
margin-bottom: 5px;
}
input[type=text],
input[type=number],
input[type=date],
input[type=password],
textarea {
border: 1px solid rgb(168, 171, 173);
box-shadow: inset 1px 1px 1px 0px rgb(228, 237, 240);
padding: 6px;
width: 100%;
box-sizing: border-box;
}
textarea {
min-height: 100px;
}
input[type=file] {
float: left;
outline: none;
position: relative;
text-align: right;
-moz-opacity: 0;
filter: alpha(opacity: 0);
opacity: 0;
z-index: 2;
width: 100%;
height: 100%;
margin-left: -99999px;
}
.desk_file_upload .faux-file-field {
padding: 0 8px 0 0;
margin: 0;
z-index: 1;
float: left;
}
.button,
button,
input[type=button],
input[type=submit],
.myportal-button {
text-decoration: none;
display: inline-block;
cursor: pointer;
color: #2f2c68;
border: 1px solid silver;
border-radius: 5px;
padding: 6px 24px;
box-shadow: inset 0 1px 1px rgba(255,255,255,.3);
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #dee9ed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dee9ed));
background: -webkit-linear-gradient(top, #ffffff 0%,#dee9ed 100%);
background: -o-linear-gradient(top, #ffffff 0%,#dee9ed 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#dee9ed 100%);
background: linear-gradient(to bottom, #ffffff 0%,#dee9ed 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dee9ed',GradientType=0 );
}
#login_form .input-button.actions {
margin-bottom: 15px;
}
#form.contact {
margin-top: 15px;
}
/* -- My Cases -- */
#registration-in-progress,
.myportal {
margin: 15px 0;
}
#support-main .myportal .content {
background: #FFF;
}
.myportal-label {
margin: 0 0 8px 0;
padding-left: 22px;
background: url('https://cdn.desk.com/images/mail.png') 0 0 no-repeat;
}
.myportal .mycases-filters {
padding: 20px 0 0 0;
height: 50px;
}
.myportal .a-selectbox {
border: 1px solid #BEBEBE;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #FFF;
-webkit-border-image: none;
display: block;
float: left;
padding: 4px;
text-decoration: none;
zoom: 1;
}
.myportal .a-selectbox select {
background: url('https://cdn.desk.com/images/arrow_down.png') right 0px no-repeat;
border: none;
box-sizing: border-box;
white-space: pre;
appearance: textfield;
-moz-appearance: textfield;
-webkit-appearance: textfield;
padding: 2px 3px;
font-size: 12px;
width: 190px;
}
.myportal .a-checkbox {
float: left;
margin: 5px;
color: #333;
font-size: 11px;
}
.myportal-button, .myportal-button:visited {
float: right;
}
.myportal-button:hover {
text-decoration: none;
}
.myportal .mycases {
background:##E5E5E5;
width: 100%;
border-collapse:collapse;
font:normal 12px verdana, arial, helvetica, sans-serif;
margin: 0px 0px 30px 0px;
-moz-box-shadow: 0 3px 4px #CCC;
-webkit-box-shadow: 0 3px 4px #CCC;
}
.myportal .mycases caption {
border:1px solid #5C443A;
color:#5C443A;
font-weight:bold;
letter-spacing:20px;
padding:6px 4px 8px 0px;
text-align:center;
text-transform:uppercase;
}
.myportal .mycases td, th {
color:#363636;
padding: 11px 5px;
}
.myportal .mycases tr {
background: #FFF;
border: 1px solid #ccc;
}
.myportal .mycases tbody tr:hover {
cursor: pointer;
}
.myportal .mycases thead th, tfoot th {
background: #E8E8E8;
font-size: 10px;
font-weight: bold;
color:#666;
padding: 6px 5px;
text-align:left;
text-transform:uppercase;
}
.myportal .mycases a {
text-decoration:none;
}
.myportal .mycases a:hover {
text-decoration: underline;
}
.myportal .mycases tbody th, .myportal .mycases tbody td {
text-align:left;
vertical-align:middle;
}
.myportal .mycases tfoot td {
background:#5C443A;
color:#FFFFFF;
padding-top:3px;
}
.myportal .mycases .a-casechannel {
text-align: center;
vertical-align: middle;
width: 20px;
padding: 11px 0 11px 11px;
}
.myportal .case-block{
float: left;
margin-right: 60px;
}
.myportal .a-caseid {
padding-left: 15px;
}
.myportal .a-caseid, .myportal .a-casestatus {
width: 70px;
}
.myportal .a-casecreated {
width: 60px;
}
#support-main .case {
padding: 0;
}
#support-main .myportal .case-details, #support-main .myportal .interaction {
padding: 25px 20px;
}
#support-main .myportal .interaction {
min-height: 60px;
padding-bottom: 0;
}
#support-main .myportal .case-details {
background-color: #fffdef;
}
#support-main .myportal .case-details h3 {
border: 0;
margin: 0 0 20px;
padding: 0;
width: 510px;
font-size: 18px;
vertical-align: top;
float: left;
}
#support-main .myportal .status {
float: right;
font-weight: bold;
}
#support-main .myportal .status img {
vertical-align: middle;
}
#support-main .myportal .status .a-New,
#support-main .myportal .status .a-Open,
#support-main .myportal .status .a-Pending,
#support-main .myportal .status .a-Resolved,
#support-main .myportal .status .a-Closed {
color: #fff;
padding: 2px 8px;
font-weight:bold;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#support-main .myportal .status .a-New {
background-color: #5B75AF;
border: #465A86 1px solid;
}
#support-main .myportal .status .a-Open {
background-color: #61A00F;
border: #4A7B0B 1px solid;
}
#support-main .myportal .status .a-Pending {
background-color: #DE901B;
border: #AA6E14 1px solid;
}
#support-main .myportal .status .a-Resolved {
background-color: #A5A5A5;
border: #7E7E7E 1px solid;
}
#support-main .myportal .status .a-Closed {
background-color: #DE901B;
border: #AA6E14 1px solid;
}
#support-main .myportal .meta {
clear: both;
color: #888;
line-height: 16px;
}
#support-main .myportal .meta strong {
color: #000;
}
.myportal #paginate_block .pagination {
background-color: transparent;
}
/* -- My Cases Detail -- */
#support-main .myportal .case-details .meta span.date,
#support-main .myportal .interaction-details span.date {
margin: 0;
color: #888;
}
#support-main .myportal .interaction-details span.date {
float: right;
text-align: right;
}
#support-main .myportal .meta .case-data {
list-style: none;
width: 50%;
float: left;
position: relative;
}
#support-main .myportal .meta .case-dates {
list-style: none;
width: 50%;
float: right;
position: relative;
}
#support-main .myportal .meta .case-dates strong {
display: inline-block;
text-align: right;
width: 50%;
*display: inline;
zoom: 1;
}
#support-main .myportal .meta .name {
font-weight: bold;
text-transform: uppercase;
}
#support-main .myportal .interactions {
border-top: 1px solid #E3DEBF;
padding-bottom: 20px;
}
#customer-account a {
margin-left: 9px;
}
#support-main .myportal .gravatar-wrapper {
position: absolute;
border: 1px solid #CCC;
width: 56px;
height: 56px;
}
#support-main .myportal .gravatar {
float: left;
border: 3px solid #FFF;
}
#support-main .myportal .gravatar.twitter-avatar {
border: 4px solid #fff;
}
#support-main .myportal .interaction-details .meta {
width: 100%;
margin: 0;
}
#support-main .myportal .interactions .system-message {
padding: 15px 20px 0 20px;
color: #aaa;
font-size: 12px;
}
#support-main .myportal .interactions .chat {
padding: 18px 20px 10px;
}
#support-main .myportal .interactions .chat .interaction-details {
padding: 0;
}
#support-main .myportal .interactions .chat .interaction-details .meta span {
color:#000;
font-weight:bold;
}
#support-main .myportal .interactions .chat .interaction-details .meta span.date {
color: #888;
font-weight: normal;
}
#support-main .myportal .interactions .chat .interaction-body {
padding-right: 50px;
margin-top: 5px;
}
#support-main .myportal .case-footer {
border-top: 1px solid #ccc;
margin-top: 20px;
padding: 25px 20px 0;
}
#support-main .myportal .case-footer p {
margin-bottom: 5px;
}
#support-main .question #form, #support-main .myportal #form {
background: #f8f8f8;
border: 1px solid #CCC;
margin: 20px;
padding: 20px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#support-main .question .answer-details, #support-main .myportal .interaction-details {
padding: 0 0 0 70px;
}
#status-update {
margin: 15px 0;
}
/* -- Misc -- */
#support-main.my-cases-detail .support-body {
background: #FFF;
border: 1px solid #CCC;
-moz-box-shadow: 0 3px 4px #CCC;
-webkit-box-shadow: 0 3px 4px #CCC;
}
</style>
<div class='wrapper'><a href="#"></a>
<div class="tabs">
<div class="tab{% if page == "page_index" %} active{% endif %}"><a href="{{desk.system.links.home}}?">Answers</a></div>
{% if site.email_enabled_config %}
<div class="tab{% if page == "email_new" or page == "email_submitted" %} active{% endif %}"><a href="{{desk.system.links.email}}">Contact Us</a></div>
{% endif %}
{% if site.myportal_enabled and false %}
{% if current_user and current_user.is_guest == false %}
<div class="tab{% if page == "login" or page == "registration" or page == "forgot_password" or page == "myportal_index" or page == "myportal_show" %} active{% endif %}"><a href="{{ desk.system.links.myportal }}">{{system.snippets.my_cases}}</a></div>
{% else %}
<div class="tab{% if page == "login" or page == "registration" or page == "forgot_password" or page == "myportal_index" or page == "myportal_show" %} active{% endif %}"><a href="{{ site.authentication_login_url }}">{{system.snippets.login}}</a></div>
{% endif %}
{% endif %}
<div style="clear: both;"></div>
</div>
<!--begin:portal_body-->
{% if page == "page_index" %}
<!--begin:page_index--><div id="desk-external-variables-page_index" class="desk-external-variables">
<div id="system-snippets-just_moderated">{{just_moderated}}</div>
</div>
<div class="search-container">
<i class="fa fa-close"></i>
<input type="text" id="q" name="q" autocomplete="off" placeholder="Ask a question">
</div>
<a href="#" class="button go-back">Go Back</a>
<!--
<div class="topic topic-faq" style="display: none;">
<a class="topic-link" href="#">Top Questions</a>
<div class="articles hidden" style="display: block;">
<div class="article article-2047379" data-keywords="">
<a class="article-link" href="#">What software comes with Apple III?</a>
<div class="article-container hidden" style="display: none;">
<div class="article-actual">
<h3 class="article-heading">What software comes with Apple III?</h3>
<div class="article-body">The Apple III comes with Solitaire, Apple III Business BASIC,&nbsp;and a trash can.</div>
</div>
</div>
</div>
<div class="article article-2047432" data-keywords="">
<a class="article-link" href="#">Getting Started with Lisa Workshop</a>
<div class="article-container hidden" style="display: none;">
<div class="article-actual">
<h3 class="article-heading">Getting Started with Lisa Workshop</h3>
<div class="article-body">Use the 50 diskette set included with your Lisa to install&nbsp;Lisa Workshop. Once complete, open&nbsp;Lisa Workshop by double-clicking the&nbsp;Lisa Workshop icon on your desktop.</div>
</div>
</div>
</div>
</div>
</div>
-->
<div class="brands">
{% for cur_brand in desk.brands %}
{% if cur_brand.name == "Desk.com Home" %}{% continue %}{% endif %}
{% if cur_brand.name == "Community" %}{% continue %}{% endif %}
<div class="brand brand-{{ cur_brand.id }}" data-b_id="{{ cur_brand.id }}">
<a class="brand-link" href="#">{{ cur_brand.name }}</a>
<div class="loading"><i class="fa fa-spinner fa-spin"></i></div>
<div class="topics"></div>
</div>
{% endfor %}
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.page_index.js"></script>
<script>
$(function() {
article_cache = [];
b_id = parseInt("{{ desk.current_brand.id }}");
$(".brand").each(function() {
cur_b_id = $(this).data("b_id");
$.ajax({
async: false,
url: '//' + document.domain.toString() + '/customer/{{ desk.system.language }}/portal/articles?t=######&b_id=' + cur_b_id
}).success(function(data) {
html = $(data).find(".topics").html().replace(/\?t=######/g, '').replace(/\&t=######/g, '').replace(/\&amp;t=######/g, '');
$(".brand-" + cur_b_id + " .loading").hide();
$(".brand-" + cur_b_id + " .topics").html(html);
}).fail(function(data) {
});
}).promise().done( function(){
$(".go-back").on("click", function() {
$("body").removeClass("suspended");
$(".article-container").hide();
return false;
});
$(".search-container i").on("click", function() {
$("#q").val("").keyup();
$(this).hide();
});
$(".topic-link").on("click", function() {
$(this).parent().toggleClass("active");
$(this).siblings(".articles").slideToggle(100);
return false;
});
$(".article-link").on("click", function() {
$("body").addClass("suspended");
brand_id = $(this).parents(".brand").data("b_id");
article_id = $(this).parents(".article").data("article_id");
if (article_cache[article_id] != 1) {
$.ajax({
async: false,
url: '//' + document.domain.toString() + '/customer/{{ desk.system.language }}/portal/articles/' + article_id + '?t=######&b_id=' + brand_id
}).success(function(data) {
html = $(data).find(".article-body").html().replace(/\?t=######/g, '').replace(/\&t=######/g, '').replace(/\&amp;t=######/g, '');
$(".article-" + article_id).parent().find(".article-body").addClass("loaded").html(html);
article_cache[article_id] = 1;
}).fail(function(data) {
});
}
$(this).siblings(".article-container").show();
return false;
});
$('#q').keyup(function() {
query = $(this).val().toLowerCase();
if (query != "") {
$(".search-container i").show();
$(".topic-faq").hide();
$(".brands .brand").each(function() {
brand_count = 0;
$(this).find(".no-results").hide();
$(this).find(".topic").each(function() {
topics_count = 0;
$(this).find(".articles .article").each(function() {
subject = $(this).text().toLowerCase();
keywords = $(this).data("keywords").toLowerCase();
haystack = subject + " " + keywords;
if (haystack.indexOf(query) !== -1) {
topics_count++; brand_count++;
$(this).show();
} else {
$(this).hide();
}
});
if (topics_count > 0) {
$(this).show();
$(this).find(".articles").show();
} else {
$(this).hide();
$(this).find(".articles").hide();
}
});
if (brand_count < 1) {
$(this).find(".no-results").show();
}
});
} else {
$(".topic").show();
$(".topic .articles").hide();
$(".topic-faq").show();
$(".topic-faq .articles").show();
$(".article").show();
$(".no-results").hide();
}
});
});
});
</script><!--end:page_index-->
{% elsif page == "page_article" %}
<!--begin:page_article-->
<div id='breadcrumbs'>
<a href='{{desk.system.links.home}}'>{{system.snippets.home}}</a>
{% if article %}
&rsaquo; <a href='{{ topic.public_articles_url }}'>{{ topic.name | clip:30 }}</a> &rsaquo; {{ article.subject_plain | clip:30 }}
{% endif %}
</div>
<div id='support-main'>
<div class='support-body'>
<div id='social-share'>
<div class='share-btn'>
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-count="vertical">{{system.snippets.tweet}}</a>
</div>
<div class='share-btn'>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="100" data-show-faces="false"></div>
</div>
<div class='share-btn'>
<g:plusone size="tall"></g:plusone>
</div>
</div>
<div class='content article'>
{% if article == null %}
<h3>{{system.snippets.article_translation_missing}} {{system.language_name_localized}}</h3>
{% else %}
<div class='title'>
<h3>{{ article.subject_plain }}</h3>
<div class='meta'>{{system.snippets.last_update}}: {{ article.updated_at | in_time_zone: site.timezone | date: '%b %d, %Y %I:%M%p %Z' }}</div>
</div>
<div class='article-content'>
{{ article.body }}
</div>
{% if article.number_of_attachments > 0 %}
<div id='attachments'>
<strong>{{system.snippets.attachments}}</strong>
<ul>
{% for attachment in article.kb_article_attachments %}
<li>
<a href="{{ attachment.faq_download_url }}" class="kb_article_attachment_a" target="_blank">{{ attachment.name }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{{ rate_block }}
{% endif %}
</div>
</div>
<!--
***************
The following attribution needs to remain as is in terms of wording with the appropriate link back to desk.com as per our terms of service: http://www.desk.com/terms
If you would like, you may change the location or the styling to better match your site, but the content and the link must remain in the template and visible to end users.
****************
-->
<div id='footer'>
{{ desk.page.theme.footer_content }}
<br/>
<a href='http://www.Desk.com'>Customer service software</a> powered by Desk.com
</div>
</div>
<!--end:page_article-->
{% elsif page == "page_topic" %}
<!--begin:page_topic-->
<div id='breadcrumbs'>
<a href='{{desk.system.links.home}}'>{{system.snippets.home}}</a>
{% if topic %}
&rsaquo; {{ topic.name }}
{% endif %}
</div>
<div id='support-main'>
<div class='support-body'>
<div class='content articles'>
{% if topic == null %}
<h3>{{system.snippets.topic_translation_missing}} {{system.language_name_localized}}</h3>
{% else %}
<div id='toggle'>
<h3>{{ topic.name }}</h3>
<div>
{% if topic.article_count > 0 %}
{% if type == 'articles' %}
<a href='{{ topic.public_articles_url }}' class='active'>{{system.snippets.articles}}</a>
{% else %}
<a href='{{ topic.public_articles_url }}'>{{system.snippets.articles}}</a>
{% endif %}
{% endif %}
{% if topic.question_exists and topic.allow_questions and portal.questions_enabled %}
{% if type == 'questions' %}
<a href='{{ topic.public_questions_url }}' class='active'>{{system.snippets.questions}}</a>
{% else %}
<a href='{{ topic.public_questions_url }}'>{{system.snippets.questions}}</a>
{% endif %}
{% endif %}
</div>
</div>
<ul>
{% if type == 'articles' %}
{% for article in articles %}
<li class='article'>
<h4>
<a href='{{ article.public_url }}'>{{ article.subject_plain | clip:70 }}</a>
</h4>
<p>{{ article.body_plain | clip:110 }}</p>
<div class='meta'>
{{ article.updated_at | in_time_zone: site.timezone | date: '%b %d, %Y %I:%M%p %Z' }}
</div>
</li>
{% endfor %}
{% else %}
{% for question in questions %}
<li class='question{% if question.featured? %} featured{% endif %}'>
<h4>
<a href='{{ question.public_url }}'>{{ question.subject_plain | clip:70 }}</a>
</h4>
<p>{{ question.body_plain | clip:110 }}</p>
<div class='meta'>
{% if question.answers_agent_count > 0 %}
<span class='answered'>
{{ question.answers_agent_count }}
{{ site.agent_name_config }}
{{ system.snippets.answer | pluralize: question.answers_agent_count, system.snippets.answers }}
</span>
{% endif %}
<span class='count'>
{{ question.answers_customer_count }}
{{ system.snippets.community_answer | pluralize: question.answers_customer_count, system.snippets.community_answers }}
</span>
<span>
{{ question.created_at | in_time_zone: site.timezone | date: '%b %d, %Y %I:%M%p %Z' }}
</span>
</div>
</li>
{% endfor %}
{% endif %}
</ul>
<div id='pagination'>
{{ more_article_block }}
</div>
{% endif %}
</div>
</div>
<!--
***************
The following attribution needs to remain as is in terms of wording with the appropriate link back to desk.com as per our terms of service: http://www.desk.com/terms
If you would like, you may change the location or the styling to better match your site, but the content and the link must remain in the template and visible to end users.
****************
-->
<div id='footer'>
{{ desk.page.theme.footer_content }}
<br/>
<a href='http://www.Desk.com'>Customer service software</a> powered by Desk.com
</div>
</div>
<!--end:page_topic-->
{% elsif page == "page_search_result" %}
<!--begin:page_search_result-->
<div id="desk-external-variables-page_search_result" class="desk-external-variables">
<div id="search_term">{{ search_term }}</div>
</div>
<div style="display:none" id="search_term">{{ search_term }}</div>
<div id='breadcrumbs'>
<a href='{{desk.system.links.home}}'>{{system.snippets.home}}</a> &rsaquo; {{system.snippets.search}}
</div>
<div id='support-main'>
<div class='support-body'>
<div class='content articles'>
<h3>{{ number_search_results }} {{system.snippets.results_found_for}} "{{ search_term }}"</h3>
<ul id='search-results'>
{% for result in search_results %}
<li class='{% if result.class_name == "Question" and result.featured? == false %}question{% elsif result.class_name == "Question" and result.featured? %}question featured{% elsif result.class_name == "Article" %}article{% endif %}'>
<h4>
<a href='{{ result.public_url }}'>{{ result.subject_plain | clip:70 }}</a>
</h4>
<p>{{ result.body_plain | clip:110 }}</p>
<div class='meta'>
{% if result.class_name == 'Article' %}
{{ result.updated_at | in_time_zone: site.timezone | date: '%b %d, %Y %I:%M%p %Z' }}
{% else %}
{% if result.answers_agent_count > 0 %}
<span class='answered'>
{{ result.answers_agent_count }}
{{ site.agent_name_config }}
{{ system.snippets.answer | pluralize: result.answers_agent_count, system.snippets.answers }}
</span>
{% endif %}
<span class='count'>
{{ result.answers_customer_count }}
Community {{ system.snippets.answer | pluralize: result.answers_customer_count, system.snippets.answers }}
</span>
<span>
{{ result.updated_at | in_time_zone: site.timezone | date: '%b %d, %Y %I:%M%p %Z' }}
</span>
{% endif %}
</div>
</li>
{% endfor %}
{% if number_search_results == 0 %}
<li class='notice'>
<h4>
{{system.snippets.sorry_try_another_search}}
<a href='{{desk.system.links.email}}'>{{system.snippets.send_us_an_email}}</a>.
</h4>
</li>
{% endif %}
</ul>
<div id='pagination'>
{{ more_search_block }}
</div>
</div>
<!-- GS -->
{% if desk.apps.get_satisfaction.enabled %}
<div class='support-body'>
<div class='content articles'>
<div id="gs_search_title">
<img alt='Ajax-loader-small' id='question_submit_spinner' src='{{ "/images/ajax-loader-small.gif" | portal_image_url: image_asset_host }}' style='display:block;margin:auto;' />
</div>
<div id='gs_search_results'></div>
</div>
</div>
{% endif %}
<!-- GS -->
</div>
<!--
***************
The following attribution needs to remain as is in terms of wording with the appropriate link back to desk.com as per our terms of service: http://www.desk.com/terms
If you would like, you may change the location or the styling to better match your site, but the content and the link must remain in the template and visible to end users.
****************
-->
<div id='footer'>
{{ desk.page.theme.footer_content }}
<br/>
<a href='http://www.Desk.com'>Customer service software</a> powered by Desk.com
</div>
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.page_search_result.js"></script>
<!--end:page_search_result-->
{% elsif page == "question_show" %}
<!--begin:question_show-->
<div id="desk-external-variables-question_show" class="desk-external-variables">
<div id="system-snippets-just_moderated">{{just_moderated}}</div>
<div id="system-snippets-name_required">{{system.snippets.name_required}}</div>
<div id="system-snippets-email_required">{{system.snippets.email_required}}</div>
<div id="system-snippets-invalid_email">{{system.snippets.invalid_email}}</div>
<div id="system-snippets-answer_required">{{system.snippets.answer_required}}</div>
<div id="system-snippets-exceeding_max_chars">{{system.snippets.exceeding_max_chars}}</div>
</div>
{% assign customer_answer_count = question.answers_customer_count %}
{% assign agent_answer_count = question.answers_agent_count %}
{% assign answers_count = question.answers_count %}
{% assign best_answer = question.best_answer %}
<div id='breadcrumbs'>
<a href='{{desk.system.links.home}}'>{{system.snippets.home}}</a> &rsaquo; <a href='{{ question.topic.public_questions_url }}'>{{ question.topic.name | clip:30 }}</a> &rsaquo; {{ question.subject | clip:30 }}
</div>
<div id='support-main'>
{% if just_moderated %}
<div id="modal-screen">&nbsp;</div>
<div id="modal">
<div class="inner">
<div class="main">
<h1>{{system.snippets.your_post_submitted}}</h1>
<p class='subheader'>
{{system.snippets.not_shown_until_reviewed}}
</p>
<div id='form'>
<div class='input-button'>
<input id='moderation_okay_button' name='commit' type='submit' value='{{system.snippets.okay}}' />
<img alt='Ajax-loader-small' id='question_submit_spinner' src='{{ "/images/ajax-loader-small.gif" | portal_image_url: image_asset_host }}' style='display: none; margin: 7px 0 0 5px; position: absolute;'/>
</div>
</div>
</div>
</div>
</div>
{% endif %}
<div class='support-body'>
<div class='content question'>
<div class='question-body'>
<span class='gravatar-wrapper'>
{{ question.from_email | gravatar_image: gravatar_unknown_user, ssl }}
</span>
<div class='question-details'>
<h3>{{ question.subject }}</h3>
<div class='meta'>
<span class='name'>
{{ question.from_name }}
</span>
<span>
{{ question.created_at | in_time_zone: site.timezone | date: '%b %d, %Y %I:%M%p %Z' }}
</span>
</div>
<p>{{ question.body }}</p>
{% if best_answer != nil %}
<h4 id='question-best-answer-heading'>
{{ answers_count }}
{{ system.snippets.community_answer | pluralize: answer_count, system.snippets.community_answers }}
</h4>
{% endif %}
</div>
{% if best_answer != nil %}
<div id='question-best-answer'>
<div class='reply'>
<span class='best-answer-green'>
{{system.snippets.best_answer}}
</span>
<span class='gravatar-wrapper'>
{{ best_answer.from_email | gravatar_image: gravatar_unknown_user, ssl }}
</span>
<div class='answer-details'>
<div class='meta'>
<span>
{{ best_answer.from_name }}
</span>
<span class="date">
{{ best_answer.updated_at | in_time_zone: site.timezone | date: '%b %d, %Y %I:%M%p %Z' }}
</span>
</div>
<p>{{ best_answer.body }}</p>
{% if question.answers_count > 1 %}
<p>
<span>
<a href="#best-answer-conversation">
{{system.snippets.view_conversation}}
</a>
</span>
</p>
{% endif %}
</div>
</div>
<br/>
</div>
{% endif %}
</div>
{% if question.non_best_answers_exist %}
<div class='replies'>
{% for answer in question.answers %}
<div class='reply'>
{% if current_user == answer.user %}
<div class='answer-rating rating-true'>
<div>
<span class='score {% if answer.rating_value > 0 %}score-positive{% elsif answer.rating_value < 0 %}score-negative{% endif %}' id='score-{{answer.id}}'>{{ answer.rating_value }}</span>
<span class='dialog'>{{system.snippets.score}}</span>
</div>
</div>
{% else %}
<div class='answer-rating rating-{{ answer | already_rated_by_user: current_user }}'>
<div>
{{ answer | already_rated_up: current_user }}
<span class='score {% if answer.rating_value > 0 %}score-positive{% elsif answer.rating_value < 0 %}score-negative{% endif %}' id='score-{{answer.id}}'>{{ answer.rating_value }}</span>
<span class='dialog'>{{system.snippets.rated}}</span>
{{ answer | already_rated_down: current_user }}
</div>
</div>
{% endif %}
<span class='gravatar-wrapper'>
{{ answer.from_email | gravatar_image: gravatar_unknown_user, ssl }}
</span>
<div class='answer-details'>
<div class='meta'>
<span>
{{ answer.from_name }}
</span>
{% if answer.id == best_answer.id %}
<span class='best-answer-green'>
<a name="best-answer-conversation">
{{system.snippets.best_answer}}
</a>
</span>
{% endif %}
{% if answer.agent? %}
<span class='date-short'>
{{ answer.updated_at | in_time_zone: site.timezone | date: '%b %d, %Y %I:%M%p %Z' }}
</span>
<span class='agent-answer-label'>
{{ site.company_name }} {{ site.agent_name_config }}
</span>
{% else %}
<span class='date'>
{{ answer.updated_at | in_time_zone: site.timezone | date: '%b %d, %Y %I:%M%p %Z' }}
</span>
{% endif %}
</div>
<div class="answer-body">{{ answer.body }}</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
{% if question.allow_answers? != true or question.case.closed? %}
<p class='form-notice'>{{system.snippets.question_closed}}</p>
{% else %}
<div id='form'>
<h4>{{system.snippets.post_public_answer}}</h4>
<div id='qna-reply-form'>
{{ form_begin }}
{% if current_user == nil or current_user.is_guest %}
<div class='input-block'>
<span class='label'>
{{system.snippets.your_name}} <span>({{system.snippets.required}})</span>
</span>
<div>
<input id='interaction_name' maxlength='100' name='interaction[name]' value='{{ interaction.name }}' type='text' />
</div>
</div>
<div class='input-block'>
<span class='label'>
{{system.snippets.your_email}} <span>({{system.snippets.required}})</span>
</span>
<div>
<input id='interaction_email' value='{{ interaction.email }}' maxlength='100' name='interaction[email]' size='100' type='text' />
</div>
</div>
{% endif %}
<div class='input-block'>
<span class='label'>
{{system.snippets.answer}} <span>({{system.snippets.required}})</span>
</span>
<div>
<textarea cols='40' id='qna_body' name='qna[body]' rows='20'>{{ qna.body }}</textarea>
</div>
</div>
<div class='input-button'>
<input id='answer_submit' name='commit' type='submit' value='{{system.snippets.post_answer}}' />
</div>
{{ form_end }}
</div>
</div>
{% endif %}
</div>
</div>
<!--
***************
The following attribution needs to remain as is in terms of wording with the appropriate link back to desk.com as per our terms of service: http://www.desk.com/terms
If you would like, you may change the location or the styling to better match your site, but the content and the link must remain in the template and visible to end users.
****************
-->
<div id='footer'>
{{ desk.page.theme.footer_content }}
<br/>
<a href='http://www.Desk.com'>Customer service software</a> powered by Desk.com
</div>
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.question_show.js"></script>
<!--end:question_show-->
{% elsif page == "question_new" %}
<!--begin:question_new-->
<div id="desk-external-variables-question_new" class="desk-external-variables">
<div id="qna-kb_topic_id">{{qna.kb_topic_id}}</div>
<div id="system-snippets-name_required">{{system.snippets.name_required}}</div>
<div id="system-snippets-email_required">{{system.snippets.email_required}}</div>
<div id="system-snippets-invalid_email">{{system.snippets.invalid_email}}</div>
<div id="system-snippets-email_required">{{system.snippets.email_required}}</div>
<div id="system-snippets-subject_required">{{system.snippets.subject_required}}</div>
<div id="system-snippets-question_required">{{system.snippets.question_required}}</div>
<div id="system-snippets-exceeding_max_chars">{{system.snippets.exceeding_max_chars}}</div>
</div>
<div id='breadcrumbs'>
<a href='{{desk.system.links.home}}'>{{system.snippets.home}}</a> &rsaquo; {{system.snippets.post_public_question}}
</div>
<div id='support-main'>
<div class='support-body'>
<div class='content'>
<h3>{{system.snippets.post_public_question}}</h3>
<div id='form'>
{{form_begin}}
<div class='input-block'>
<span class='label'>{{system.snippets.topic}}</span>
<div>
<select id='qna_kb_topic_id' name='qna[kb_topic_id]'>
{% for topic in topics %}
<option value='{{ topic.id }}'>{{ topic.name | clip:30 }}</option>
{% endfor %}
</select>
</div>
</div>
{% if current_user == nil or current_user.is_guest %}
<div class='input-block'>
<span class='label'>
{{system.snippets.your_name}} <span>({{system.snippets.required}})</span>
</span>
<div>
<input id='interaction_name' value='{{ interaction.name }}' maxlength='100' name='interaction[name]' type='text' />
</div>
</div>
<div class='input-block'>
<span class='label'>
{{system.snippets.your_email}} <span>({{system.snippets.required}})</span>
</span>
<div>
<input id='interaction_email' value='{{ interaction.email }}' maxlength='100' name='interaction[email]' type='text' />
</div>
</div>
{% endif %}
<div class='input-block'>
<span class='label'>
{{system.snippets.subject}} <span>({{system.snippets.required}})</span>
</span>
<div>
<input id='qna_subject' maxlength='100' name='qna[subject]' type='text' value='{% if search_term and search_term != '' %}{{search_term}}{% else %}{{qna.subject}}{%endif%}' />
</div>
</div>
<div class='input-block'>
<span class='label'>
{{system.snippets.your_question}} <span>({{system.snippets.required}})</span>
</span>
<div>
<textarea id='qna_body' name='qna[body]'>{{qna.body}}</textarea>
</div>
</div>
<div class='input-button'>
<input id='question_submit' name='commit' type='submit' value='{{system.snippets.ask_question}}' />
<img alt='Ajax-loader-small' id='question_submit_spinner' src='{{ "/images/ajax-loader-small.gif" | portal_image_url: image_asset_host }}' style='display: none; margin: 7px 0 0 5px; position: absolute;' />
</div>
{{form_end}}
</div>
</div>
</div>
<!--
***************
The following attribution needs to remain as is in terms of wording with the appropriate link back to desk.com as per our terms of service: http://www.desk.com/terms
If you would like, you may change the location or the styling to better match your site, but the content and the link must remain in the template and visible to end users.
****************
-->
<div id='footer'>
{{ desk.page.theme.footer_content }}
<br/>
<a href='http://www.Desk.com'>Customer service software</a> powered by Desk.com
</div>
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.question_new.js"></script>
<!--end:question_new-->
{% elsif page == "question_pre_create" %}
<!--begin:question_pre_create-->
<div id="desk-external-variables-question_pre_create" class="desk-external-variables">
<div id="search_term">{{search_term}}</div>
<div id="number_search_results">{{number_search_results}}</div>
<div id="system-snippets-name_required">{{system.snippets.name_required}}</div>
<div id="system-snippets-email_required">{{system.snippets.email_required}}</div>
<div id="system-snippets-invalid_email">{{system.snippets.invalid_email}}</div>
<div id="system-snippets-subject_required">{{system.snippets.subject_required}}</div>
<div id="system-snippets-question_required">{{system.snippets.question_required}}</div>
<div id="system-snippets-exceeding_max_chars">{{system.snippets.exceeding_max_chars}}</div>
</div>
<div id='breadcrumbs'>
<a href='{{desk.system.links.home}}'>{{system.snippets.home}}</a> &rsaquo; {{system.snippets.post_public_question}}
</div>
<div id='support-main'>
<div id="modal-screen">&nbsp;</div>
<div id="modal">
<div class="inner articles">
<div class="close">
<a href="/" class="onclick-go-back">
<img src='{{ "/images/fancybox/fancybox_close.png" | portal_image_url: image_asset_host }}' alt='close'>
</a>
</div>
<div class="main">
{% if number_search_results > 0 %}
<h1>{{system.snippets.not_posted_question_yet}}</h1>
<p class="subheader">{{system.snippets.article_help}}</p>
<ul id='search-results' class='condensed'>
{% for result in search_results limit:3 %}
<li class='{% if result.class_name == "Question" and result.featured? == false %}question{% elsif result.class_name == "Question" and result.featured? %}question featured{% elsif result.class_name == "Article" %}article{% endif %}'>
<h4>
<a href='{{ result.public_url }}' target='_blank'>
{{ result.subject_plain | clip:70 }}
</a>
</h4>
<p>
{{ result.body_plain | clip:105 }}
</p>
</li>
{% endfor %}
<li class="note">
({{system.snippets.click_open_window}})
</li>
</ul>
<div id='form'>
{{form_begin}}
<div class='input-button'>
{{system.snippets.did_not_help}}
<input id='question_submit' name='commit' type='submit' value='{{system.snippets.post_question}}' />
<img alt='Ajax-loader-small' id='question_submit_spinner' src='{{ "/images/ajax-loader-small.gif" | portal_image_url: image_asset_host }}' style='display: none; margin: 7px 0 0 5px; position: absolute;' />
</div>
{{form_end}}
</div>
{% else %}
<h1>
{{system.snippets.please_wait}}
</h1>
{% endif %}
</div>
</div>
</div>
<div class='support-body'>
<div class='content'>
<h3>{{system.snippets.post_public_question}}</h3>
<div id='form'>
{{form_begin}}
<div class='input-block'>
<span class='label'>{{system.snippets.topic}}</span>
<div>
<select id='qna_kb_topic_id' name='qna[kb_topic_id]'>
{% for topic in topics %}
<option value='{{ topic.id }}'>{{ topic.name | clip:30 }}</option>
{% endfor %}
</select>
</div>
</div>
{% if current_user == nil or current_user.is_guest %}
<div class='input-block'>
<span class='label'>
{{system.snippets.your_name}} <span>({{system.snippets.required}})</span>
</span>
<div>
<input id='interaction_name' value='{{ interaction.name }}' maxlength='100' name='interaction[name]' type='text' />
</div>
</div>
<div class='input-block'>
<span class='label'>
{{system.snippets.your_email}} <span>({{system.snippets.required}})</span>
</span>
<div>
<input id='interaction_email' value='{{ interaction.email }}' maxlength='100' name='interaction[email]' type='text' />
</div>
</div>
{% endif %}
<div class='input-block'>
<span class='label'>
{{system.snippets.subject}} <span>({{system.snippets.required}})</span>
</span>
<div>
<input id='qna_subject' maxlength='100' name='qna[subject]' type='text' value='{% if search_term and search_term != '' %}{{search_term}}{% else %}{{qna.subject}}{%endif%}' />
</div>
</div>
<div class='input-block'>
<span class='label'>
{{system.snippets.your_question}} <span>({{system.snippets.required}})</span>
</span>
<div>
<textarea id='qna_body' name='qna[body]'>{{qna.body}}</textarea>
</div>
</div>
<div class='input-button'>
<input id='question_submit' name='commit' type='submit' value='{{system.snippets.ask_question}}' />
</div>
{{form_end}}
</div>
</div>
</div>
<!--
***************
The following attribution needs to remain as is in terms of wording with the appropriate link back to desk.com as per our terms of service: http://www.desk.com/terms
If you would like, you may change the location or the styling to better match your site, but the content and the link must remain in the template and visible to end users.
****************
-->
<div id='footer'>
{{ desk.page.theme.footer_content }}
<br/>
<a href='http://www.Desk.com'>Customer service software</a> powered by Desk.com
</div>
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.question_pre_create.js"></script>
<!--end:question_pre_create-->
{% elsif page == "email_new" %}
<!--begin:email_new-->
<div id="desk-external-variables-email_new" class="desk-external-variables">
<div id="system-snippets-name_required">{{system.snippets.name_required}}</div>
<div id="system-snippets-email_required">{{system.snippets.email_required}}</div>
<div id="system-snippets-invalid_email">{{system.snippets.invalid_email}}</div>
<div id="system-snippets-subject_required">{{system.snippets.subject_required}}</div>
<div id="system-snippets-question_required">{{system.snippets.question_required}}</div>
<div id="system-snippets-exceeding_max_chars">{{system.snippets.exceeding_max_chars}}</div>
<div id="max_number_attachments">{{desk.system.max_attachments}}</div>
<div id="system-snippets-add_attachment">{{system.snippets.add_attachment}}</div>
</div>
<div id='support-main'>
<div class='support-body'>
<div class='content'>
<div id='form' class='contact'>
{{form_begin}}
{% if current_user == nil or current_user.is_guest %}
<div class='input-block div-name'>
<span class='label'>
{{system.snippets.your_name}} <span>({{system.snippets.required}})</span>
</span>
<div>
<input value='{{ interaction.name }}' id='interaction_name' maxlength='100' name='interaction[name]' type='text' />
</div>
</div>
<div class='input-block div-email'>
<span class='label'>
{{system.snippets.your_email}} <span>({{system.snippets.required}})</span>
</span>
<div>
<input value='{{ interaction.email }}' id='interaction_email' maxlength='100' name='interaction[email]' type='text' />
</div>
</div>
{% endif %}
<div class='input-block div-subject'>
<span class='label'>
{{system.snippets.subject}} <span>({{system.snippets.required}})</span>
</span>
<div>
<input id='email_subject' maxlength='100' name='email[subject]' type='text' value='{% if search_term and search_term != '' %}{{search_term}}{% else %}{{email.subject}}{%endif%}'/>
</div>
</div>
<div class='input-block div-body'>
<span class='label'>
{{system.snippets.message}} <span>({{system.snippets.required}})</span>
</span>
<div>
<textarea id='email_body' name='email[body]'>{{email.body}}</textarea>
</div>
</div>
<div class='input-block div-attachment'>
<span class='label'>
{{system.snippets.file_attachment}}
</span>
<div class="desk_file_upload">
<input name="case_attachment[attachment]" size="84" type="file"/>
<div class="faux-file-field">
<input type="text" disabled="disabled"/>
</div>
<input type="button" value="{{system.snippets.choose_file}}"/>
</div>
</div><br/>
<div class='input-button'>
<input id='email_submit' name='commit' type='submit' value='{{system.snippets.send_email}}' />
<img alt='Ajax-loader-small' id='email_submit_spinner' src='{{ "/images/ajax-loader-small.gif" | portal_image_url: image_asset_host }}' style='display: none; margin: 7px 0 0 5px; position: absolute;' />
</div>
{{form_end}}
</div>
</div>
</div>
<!--
***************
The following attribution needs to remain as is in terms of wording with the appropriate link back to desk.com as per our terms of service: http://www.desk.com/terms
If you would like, you may change the location or the styling to better match your site, but the content and the link must remain in the template and visible to end users.
****************
-->
<div id='footer'>
{{ desk.page.theme.footer_content }}
<br/>
<a href='http://www.Desk.com'>Customer service software</a> powered by Desk.com
</div>
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.email_new.js"></script>
<!--end:email_new-->
{% elsif page == "email_pre_create" %}
<!--begin:email_pre_create-->
<div id="desk-external-variables-email_pre_create" class="desk-external-variables">
<div id="search_term">{{search_term}}</div>
<div id="number_search_results">{{number_search_results}}</div>
<div id="system-snippets-name_required">{{system.snippets.name_required}}</div>
<div id="system-snippets-email_required">{{system.snippets.email_required}}</div>
<div id="system-snippets-invalid_email">{{system.snippets.invalid_email}}</div>
<div id="system-snippets-subject_required">{{system.snippets.subject_required}}</div>
<div id="system-snippets-question_required">{{system.snippets.question_required}}</div>
<div id="system-snippets-exceeding_max_chars">{{system.snippets.exceeding_max_chars}}</div>
</div>
<div id='breadcrumbs'>
<a href='{{desk.system.links.home}}'>{{system.snippets.home}}</a> &rsaquo; {{system.snippets.email_us}}
</div>
<div id='support-main'>
<div id="modal-screen">&nbsp;</div>
<div id="modal">
<div class="inner articles">
<div class="close">
<a href="/" class="onclick-go-back">
<img src='{{ "/images/fancybox/fancybox_close.png" | portal_image_url: image_asset_host }}' alt='close'>
</a>
</div>
<div class="main">
{% if number_search_results > 0 %}
<h1>{{system.snippets.not_posted_yet}}</h1>
<p class="subheader">{{system.snippets.article_help}}</p>
<ul id='search-results' class='condensed'>
{% for result in search_results limit:3 %}
<li class='{% if result.class_name == "Question" and result.featured? == false %}question{% elsif result.class_name == "Question" and result.featured? %}question featured{% elsif result.class_name == "Article" %}article{% endif %}'>
<h4>
<a href='{{ result.public_url }}' target='_blank'>
{{ result.subject_plain | clip:70 }}
</a>
</h4>
<p>
{{ result.body_plain | clip:105 }}
</p>
</li>
{% endfor %}
<li class="note">
({{system.snippets.click_open_window}})
</li>
</ul>
<div id='form'>
{{form_begin}}
<div class='input-button'>
{{system.snippets.did_not_help}}
<input id='email_submit' name='commit' type='submit' value='{{system.snippets.send_your_email}}' />
<img alt='Ajax-loader-small' id='email_submit_spinner' src='{{ "/images/ajax-loader-small.gif" | portal_image_url: image_asset_host }}' style='display: none; margin: 7px 0 0 5px; position: absolute;' />
</div>
{{form_end}}
</div>
{% else %}
<h1>
{{system.snippets.please_wait}}
</h1>
{% endif %}
</div>
</div>
</div>
<div class='support-body'>
<div class='content'>
<h3>{{system.snippets.email_us}}</h3>
<div id='form'>
{{form_begin}}
{% if current_user == nil or current_user.is_guest %}
<div class='input-block'>
<span class='label'>
{{system.snippets.your_name}} <span>({{system.snippets.required}})</span>
</span>
<div>
<input value='{{ interaction.name }}' id='interaction_name' maxlength='100' name='interaction[name]' type='text' />
</div>
</div>
<div class='input-block'>
<span class='label'>
{{system.snippets.your_email}} <span>({{system.snippets.required}})</span>
</span>
<div>
<input value='{{ interaction.email }}' id='interaction_email' maxlength='100' name='interaction[email]' type='text' />
</div>
</div>
{% endif %}
<div class='input-block'>
<span class='label'>
{{system.snippets.subject}} <span>({{system.snippets.required}})</span>
</span>
<div>
<input id='email_subject' maxlength='100' name='email[subject]' type='text' value='{% if search_term and search_term != '' %}{{search_term}}{% else %}{{email.subject}}{%endif%}'/>
</div>
</div>
<div class='input-block'>
<span class='label'>
{{system.snippets.message}} <span>({{system.snippets.required}})</span>
</span>
<div>
<textarea id='email_body' name='email[body]'>{{email.body}}</textarea>
</div>
</div>
<div class='input-button'>
<input id='email_submit' name='commit' type='submit' value='{{system.snippets.send_email}}' />
</div>
{{form_end}}
</div>
</div>
</div>
<!--
***************
The following attribution needs to remain as is in terms of wording with the appropriate link back to desk.com as per our terms of service: http://www.desk.com/terms
If you would like, you may change the location or the styling to better match your site, but the content and the link must remain in the template and visible to end users.
****************
-->
<div id='footer'>
{{ desk.page.theme.footer_content }}
<br/>
<a href='http://www.Desk.com'>Customer service software</a> powered by Desk.com
</div>
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.email_pre_create.js"></script>
<!--end:email_pre_create-->
{% elsif page == "email_submitted" %}
<!--begin:email_submitted-->
<div id='breadcrumbs'>
<a href='{{desk.system.links.home}}'>{{system.snippets.home}}</a> &rsaquo; {{system.snippets.email_us}}
</div>
<div id='support-main'>
<div class='support-body'>
<div class='content'>
<h3>{{system.snippets.email_us}}</h3>
<h4>{{system.snippets.email_success}}</h4>
</div>
</div>
<!--
***************
The following attribution needs to remain as is in terms of wording with the appropriate link back to desk.com as per our terms of service: http://www.desk.com/terms
If you would like, you may change the location or the styling to better match your site, but the content and the link must remain in the template and visible to end users.
****************
-->
<div id='footer'>
{{ desk.page.theme.footer_content }}
<br/>
<a href='http://www.Desk.com'>Customer service software</a> powered by Desk.com
</div>
</div>
<!--end:email_submitted-->
{% elsif page == "chat_new" %}
<!--begin:chat_new-->
<div id="desk-external-variables-chat_new" class="desk-external-variables">
<div id="system-snippets-name_required">{{system.snippets.name_required}}</div>
<div id="system-snippets-email_required">{{system.snippets.email_required}}</div>
<div id="system-snippets-invalid_email">{{system.snippets.invalid_email}}</div>
<div id="system-snippets-question_required">{{system.snippets.question_required}}</div>
<div id="system-snippets-exceeding_max_chars">{{system.snippets.exceeding_max_chars}}</div>
</div>
<div id='breadcrumbs'>
<a href='{{desk.system.links.home}}'>{{system.snippets.home}}</a> &rsaquo; {{system.snippets.live_chat}}
</div>
<div id='support-main'>
<div class='support-body'>
<div class='content'>
<h3>{{system.snippets.live_chat}}</h3>
<div id='form'>
{{form_begin}}
{% if current_user == nil or current_user.is_guest %}
<div class='input-block'>
<span class='label'>
{{system.snippets.your_name}} <span>({{system.snippets.required}})</span>
</span>
<div>
<input value='{{ interaction.name }}' id='interaction_name' maxlength='100' name='interaction[name]' type='text' />
</div>
</div>
<div class='input-block'>
<span class='label'>
{{system.snippets.your_email}} <span>({{system.snippets.required}})</span>
</span>
<div>
<input value='{{ interaction.email }}' id='interaction_email' maxlength='100' name='interaction[email]' type='text' />
</div>
</div>
{% endif %}
<div class='input-block'>
<span class='label'>
{{system.snippets.question}} <span>({{system.snippets.required}})</span>
</span>
<div>
<textarea id='chat_subject' name='chat[subject]'>{% if search_term and search_term != '' %}{{search_term}}{% else %}{{chat.subject}}{%endif%}</textarea>
</div>
</div>
<div class='input-button'>
<input id='chat_submit' name='commit' type='submit' value='{{system.snippets.go_chat}}' />
<img alt='Ajax-loader-small' id='chat_submit_spinner' src='{{ "/images/ajax-loader-small.gif" | portal_image_url: image_asset_host }}' style='display: none; margin: 7px 0 0 5px; position: absolute;' />
</div>
{{form_end}}
</div>
</div>
</div>
<!--
***************
The following attribution needs to remain as is in terms of wording with the appropriate link back to desk.com as per our terms of service: http://www.desk.com/terms
If you would like, you may change the location or the styling to better match your site, but the content and the link must remain in the template and visible to end users.
****************
-->
<div id='footer'>
{{ desk.page.theme.footer_content }}
<br/>
<a href='http://www.Desk.com'>Customer service software</a> powered by Desk.com
</div>
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.chat_new.js"></script>
<!--end:chat_new-->
{% elsif page == "chat_pre_create" %}
<!--begin:chat_pre_create-->
<div id="desk-external-variables-chat_pre_create" class="desk-external-variables">
<div id="search_term">{{search_term}}</div>
<div id="number_search_results">{{number_search_results}}</div>
<div id="system-snippets-name_required">{{system.snippets.name_required}}</div>
<div id="system-snippets-email_required">{{system.snippets.email_required}}</div>
<div id="system-snippets-invalid_email">{{system.snippets.invalid_email}}</div>
<div id="system-snippets-question_required">{{system.snippets.question_required}}</div>
<div id="system-snippets-exceeding_max_chars">{{system.snippets.exceeding_max_chars}}</div>
</div>
<div id='breadcrumbs'>
<a href='{{desk.system.links.home}}'>{{system.snippets.home}}</a> &rsaquo; {{system.snippets.live_chat}}
</div>
<div id='support-main'>
<div id="modal-screen">&nbsp;</div>
<div id="modal">
<div class="inner articles">
<div class="close">
<a href="/" class="onclick-go-back">
<img src='{{ "/images/fancybox/fancybox_close.png" | portal_image_url: image_asset_host }}' alt='close'>
</a>
</div>
<div class="main">
{% if number_search_results > 0 %}
<h1>{{system.snippets.not_started_chat_yet}}</h1>
<p class="subheader">{{system.snippets.article_help}}</p>
<ul id='search-results' class='condensed'>
{% for result in search_results limit:3 %}
<li class='{% if result.class_name == "Question" and result.featured? == false %}question{% elsif result.class_name == "Question" and result.featured? %}question featured{% elsif result.class_name == "Article" %}article{% endif %}'>
<h4>
<a href='{{ result.public_url }}' target='_blank'>
{{ result.subject_plain | clip:70 }}
</a>
</h4>
<p>
{{ result.body_plain | clip:105 }}
</p>
</li>
{% endfor %}
<li class="note">
({{system.snippets.click_open_window}})
</li>
</ul>
<div id='form'>
{{form_begin}}
<div class='input-button'>
{{system.snippets.did_not_help}}
<input id='chat_submit' name='commit' type='submit' value='{{system.snippets.start_chat}}' />
<img alt='Ajax-loader-small' id='chat_submit_spinner' src='{{ "/images/ajax-loader-small.gif" | portal_image_url: image_asset_host }}' style='display: none; margin: 7px 0 0 5px; position: absolute;' />
</div>
{{form_end}}
</div>
{% else %}
<h1>{{system.snippets.chat_room_ready}}</h1>
<p class="subheader">{{system.snippets.click_button_chat}}</p>
<div id='form'>
{{form_begin}}
<div class='input-button'>
<input id='chat_submit' name='commit' type='submit' value='{{system.snippets.start_chat}}' />
</div>
{{form_end}}
</div>
{% endif %}
</div>
</div>
</div>
<div class='support-body'>
<div class='content'>
<h3>{{system.snippets.live_chat}}</h3>
<div id='form'>
{{form_begin}}
{% if current_user == nil or current_user.is_guest %}
<div class='input-block'>
<span class='label'>
{{system.snippets.your_name}} <span>({{system.snippets.required}})</span>
</span>
<div>
<input value='{{ interaction.name }}' id='interaction_name' maxlength='100' name='interaction[name]' type='text' />
</div>
</div>
<div class='input-block'>
<span class='label'>
{{system.snippets.your_email}} <span>({{system.snippets.required}})</span>
</span>
<div>
<input value='{{ interaction.email }}' id='interaction_email' maxlength='100' name='interaction[email]' type='text' />
</div>
</div>
{% endif %}
<div class='input-block'>
<span class='label'>
{{system.snippets.question}} <span>({{system.snippets.required}})</span>
</span>
<div>
<textarea id='chat_subject' name='chat[subject]'>{% if search_term and search_term != '' %}{{search_term}}{% else %}{{chat.subject}}{%endif%}</textarea>
</div>
</div>
<div class='input-button'>
<input id='chat_submit' name='commit' type='submit' value='{{system.snippets.go_chat}}' />
</div>
{{form_end}}
</div>
</div>
</div>
<!--
***************
The following attribution needs to remain as is in terms of wording with the appropriate link back to desk.com as per our terms of service: http://www.desk.com/terms
If you would like, you may change the location or the styling to better match your site, but the content and the link must remain in the template and visible to end users.
****************
-->
<div id='footer'>
{{ desk.page.theme.footer_content }}
<br/>
<a href='http://www.Desk.com'>Customer service software</a> powered by Desk.com
</div>
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.chat_pre_create.js"></script>
<!--end:chat_pre_create-->
{% elsif page == "myportal_index" %}
<!--begin:myportal_index--><style>
#registration-in-progress {
display: none;
}
</style>
<div id='support-main'>
<div class='support-body'>
<div class='content'>
<div id="registration-in-progress">
<img alt='Ajax-loader-small' src='{{ "/images/ajax-loader-small.gif" | portal_image_url: image_asset_host }}' />
{{desk.system.snippets.registration_in_progress}}
</div>
<div class='myportal' id="mycases">
<div class='mycases-filters'>
<div class='a-selectbox'>
<select id="a-cases-filter">
<option value="my">{{desk.system.snippets.show_my_cases}}</option>
{% if desk.customer.can_access_company_tickets? %}
<option value="company" selected="selected">{{desk.system.snippets.show_all_cases}}</option>
{% endif %}
<option value="7">{{desk.system.snippets.show_last_num_days | format_snippet: '"num":"7"' }}</option>
<option value="30">{{desk.system.snippets.show_last_num_days | format_snippet: '"num":"30"' }}</option>
</select>
</div>
<div class='a-checkbox'>
<input id="a-active-only" type="checkbox">{{desk.system.snippets.active_only}}</input>
</div>
<a href='{{desk.system.links.email}}' class='myportal-button'>{{desk.system.snippets.create_new_case}}</a>
</div>
<table class='mycases'>
<thead>
<tr>
<th></th>
<th>{{desk.system.snippets.case_id}}</th>
<th>{{desk.system.snippets.subject}}</th>
{% if desk.customer.can_access_company_tickets? %}<th>{{desk.system.snippets.from}}</th>{% endif %}
<th>{{desk.system.snippets.updated}}</th>
<th>{{desk.system.snippets.status}}</th>
</tr>
</thead>
<tbody>
{% for case in desk.page.content.cases %}
<tr>
<td class='a-casechannel'><img src='{{ case.channel_icon }}'/></td>
<td class='a-caseid'>{{ case.id }}</td>
<td class='a-casesubject'><a href="{{ case.portal_url }}">{{ case.subject }}</a></td>
{% if desk.customer.can_access_company_tickets? %}<td class='a-casefrom'>{{case.customer.first_name}}</td>{% endif %}
<td class='a-casecreated'>{{ case.updated_at | in_time_zone: site.timezone | date: '%b %d' }}</td>
<td class='a-casestatus'>{% case case.status.id %}
{% when 10 %}
{{desk.system.snippets.case_new}}
{% when 30 %}
{{desk.system.snippets.case_open}}
{% when 50 %}
{{desk.system.snippets.case_pending}}
{% when 70 %}
{{desk.system.snippets.case_resolved}}
{% when 90 %}
{{desk.system.snippets.case_closed}}
{% endcase %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
<div id='pagination'>
{{ desk.page.content.more_cases_block }}
</div>
</div>
<div>
</div>
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.myportal_index.js"></script>
<!--end:myportal_index-->
{% elsif page == "myportal_show" %}
<!--begin:myportal_show-->
{% assign case = desk.page.content.case %}
<div id="desk-external-variables-myaccount" class="desk-external-variables">
<div id="system-snippets-reply_required">{{system.snippets.message_required}}</div>
</div>
<div id="status-update">
{{resolve_or_reopen_button}}
</div>
<div id='support-main' class='my-cases-detail'>
<div class='support-body myportal'>
<div class='content case'>
<div class='case-details'>
<h3>{{case.subject}}</h3>
<div class='status'>
<img src='{{ case.channel_icon }}'/>
{% if case.is_twitter_channel? %}
{% elsif case.is_facebook_channel? %}
{% else %}
<span class='a-{{case.status.name}}'>
{% case case.status.id %}
{% when 10 %}
{{desk.system.snippets.case_new}}
{% when 30 %}
{{desk.system.snippets.case_open}}
{% when 50 %}
{{desk.system.snippets.case_pending}}
{% when 70 %}
{{desk.system.snippets.case_resolved}}
{% when 90 %}
{{desk.system.snippets.case_closed}}
{% endcase %}
</span>
{% endif %}
</div>
<div class='meta'>
<ul class='case-data'>
<li>
<strong>{{desk.system.snippets.case_id}}:</strong>
<span>{{case.id}}</span>
</li>
<li>
<strong>{{desk.system.snippets.assigned_agent}}:</strong>
<span>{{case.user.name_public | show_something: desk.system.snippets.unassigned}}</span>
</li>
</ul>
<ul class='case-dates'>
{% if case.is_twitter_channel? %}
<li>
<strong>{{desk.system.snippets.status}}:</strong>
{% case case.status.id %}
{% when 10 %}
{{desk.system.snippets.case_new}}
{% when 30 %}
{{desk.system.snippets.case_open}}
{% when 50 %}
{{desk.system.snippets.case_pending}}
{% when 70 %}
{{desk.system.snippets.case_resolved}}
{% when 90 %}
{{desk.system.snippets.case_closed}}
{% endcase %}
</li>
{% elsif case.is_facebook_channel? %}
<li>
<strong>{{desk.system.snippets.status}}:</strong>
{% case case.status.id %}
{% when 10 %}
{{desk.system.snippets.case_new}}
{% when 30 %}
{{desk.system.snippets.case_open}}
{% when 50 %}
{{desk.system.snippets.case_pending}}
{% when 70 %}
{{desk.system.snippets.case_resolved}}
{% when 90 %}
{{desk.system.snippets.case_closed}}
{% endcase %}
</li>
{% endif %}
<li>
<strong>{{desk.system.snippets.updated}}:</strong>
<span class="date">{{case.updated_at | in_time_zone: site.timezone | date: '%b %d, %Y %I:%M%p %Z' }}</span>
</li>
<li>
<strong>{{desk.system.snippets.created}}:</strong>
<span class="date">{{case.created_at | in_time_zone: site.timezone | date: '%b %d, %Y %I:%M%p %Z' }}</span>
</li>
</ul>
<div style="clear:both"></div>
</div>
</div>
<div class='interactions'>
{% if case.is_email_channel? %}
{% for email in case.emails %}
<div class='interaction'>
<span class='gravatar-wrapper'>
{% if email.inbound? %}
{% if case.customer.facebook.profile_image_url != nil %}
<img src="{{ case.customer.facebook.profile_image_url }}" class="gravatar" />
{% elsif case.customer.twitter.profile_image_url != nil %}
<img src="{{ case.customer.twitter.profile_image_url }}" width="48" height="48" class="gravatar twitter-avatar" />
{% else %}
{{ email.from | gravatar_image: gravatar_unknown_user, ssl }}
{% endif %}
{% else %}
{{ email.agent.email | gravatar_image: gravatar_unknown_user, ssl }}
{% endif %}
</span>
<div class='interaction-details'>
<div class='meta'>
{% if email.inbound? %}
<span>{{email.from_name | show_something: case.customer.name}}</span>
{% else %}
<span>{{email.agent.name_public}}</span>
{% endif %}
<span class='date'>{{email.created_at | in_time_zone: site.timezone | date: '%b %d, %Y %I:%M%p' }}</span>
</div>
{% if email.is_erased? %}
{% capture params %}"name":"{{email.erased_by.name}}"{% endcapture %}
<div class='interaction-body'>{{desk.system.snippets.content_erased | format_snippet: params }}</div>
{% else %}
<div class='interaction-body'>{{ email.new_html | escape_newlines }}</div>
{% endif %}
{% if email.attachments.size > 0 %}
{{desk.system.snippets.attachments}}
{% for attachment in email.attachments %}
| <a target="_blank" href="{{attachment.url}}">{{attachment.file_name}}</a>
{% endfor %}
{% endif %}
</div>
</div>
{% endfor %}
{% elsif case.is_qna_channel? %}
{% assign question = case.question %}
{% if question.hidden? %}
<div class='interaction'>
<h1>{{system.snippets.not_posted_question_yet}}</h1>
</div>
{% else %}
<div class='interaction'>
<span class='gravatar-wrapper'>
{% if case.customer.facebook.profile_image_url != nil %}
<img src="{{ case.customer.facebook.profile_image_url }}" class="gravatar" />
{% elsif case.customer.twitter.profile_image_url != nil %}
<img src="{{ case.customer.twitter.profile_image_url }}" width="48" height="48" class="gravatar twitter-avatar" />
{% else %}
{{ question.from_email | gravatar_image: gravatar_unknown_user, ssl }}
{% endif %}
</span>
<div class='interaction-details'>
<div class='meta'>
<span>{{question.from_name | show_something: case.customer.name}}</span>
<span class='date'>{{question.created_at | in_time_zone: site.timezone | date: '%b %d, %Y %I:%M%p %Z' }}</span>
</div>
<div class='interaction-body'>{{ question.body_plain | escape_newlines }}</div>
</div>
</div>
{% for answer in case.answers %}
<div class='interaction'>
<span class='gravatar-wrapper'>
{% if answer.inbound? %}
{% if answer.customer.facebook.profile_image_url != nil %}
<img src="{{ answer.customer.facebook.profile_image_url }}" class="gravatar" />
{% elsif answer.customer.twitter.profile_image_url != nil %}
<img src="{{ answer.customer.twitter.profile_image_url }}" width="48" height="48" class="gravatar twitter-avatar" />
{% else %}
{{ answer.from_email | gravatar_image: gravatar_unknown_user, ssl }}
{% endif %}
{% else %}
{{ answer.agent.email | gravatar_image: gravatar_unknown_user, ssl }}
{% endif %}
</span>
<div class='interaction-details'>
<div class='meta'>
{% if answer.inbound? %}
<span>{{answer.from_name | show_something: case.customer.name}}</span>
{% else %}
<span>{{answer.agent.name_public}}</span>
{% endif %}
<span class='date'>{{answer.created_at | in_time_zone: site.timezone | date: '%b %d, %Y %I:%M%p %Z' }}</span>
</div>
{% if answer.is_erased? %}
{% capture params %}"name":"{{answer.erased_by.name}}"{% endcapture %}
<div class='interaction-body'>{{desk.system.snippets.content_erased | format_snippet: params }}</div>
{% else %}
<div class='interaction-body'>{{ answer.body_plain | escape_newlines }}</div>
{% endif %}
</div>
</div>
{% endfor %}
{% endif %}
{% elsif case.is_chat_channel? %}
{% assign chat = case.chat %}
{% for message in chat.messages %}
{% if message.from_system? %}
<div class='system-message'>
<span>{{message.text}}</span> at {{message.created_at | in_time_zone: site.timezone | date: '%I:%M%p' }}</span>
</div>
{% else %}
<div class='interaction chat'>
<div class='interaction-details'>
<div class='meta'>
<span>{{message.user.name}}</span>
<span class='date'>{{message.created_at | in_time_zone: site.timezone | date: '%I:%M%p' }}</span>
</div>
<div class='interaction-body'>{{ message.text | escape_newlines }}</div>
</div>
</div>
{% endif %}
{% endfor %}
{% elsif case.is_twitter_channel? %}
{% for tweet in case.tweets %}
{% assign reply_to = tweet.public_url %}
{% assign tweet_dm = tweet.dm %}
<div class='interaction'>
<span class='gravatar-wrapper'>
{% if tweet.inbound? %}
<img src="{{ case.customer.twitter.profile_image_url }}" width="48" height="48" class="gravatar twitter-avatar" />
{% else %}
{{ tweet.agent.email | gravatar_image: gravatar_unknown_user, ssl }}
{% endif %}
</span>
<div class='interaction-details'>
<div class='meta'>
{% if tweet.inbound? %}
<span><a href="http://twitter.com/{{ tweet.twitter_customer.login }}" target="_blank">{{case.customer.name}}</a> via {{ tweet.twitter_customer.login }}</span>
{% else %}
<span>{{tweet.agent.name_public}}</span>
{% endif %}
<span class='date'>{{tweet.created_at | in_time_zone: site.timezone | date: '%b %d, %Y %I:%M%p' }}</span>
</div>
{% if tweet.is_erased? %}
{% capture params %}"name":"{{tweet.erased_by.name}}"{% endcapture %}
<div class='interaction-body'>{{desk.system.snippets.content_erased | format_snippet: params }}</div>
{% else %}
<div class='interaction-body'>{{ tweet.subject | escape_newlines }}</div>
{% endif %}
</div>
</div>
{% endfor %}
<div style="clear:both;"></div>
<div class="case-footer">
{% if tweet_dm %}
<p>This is a private message (Direct Message). Please log into <a href="http://www.twitter.com" target="_blank">Twitter</a> to view and reply to this thread.</p>
{% else %}
<p><a href="{{ reply_to }}" target="_blank">View and reply to this tweet on Twitter</a></p>
{% endif %}
</div>
{% elsif case.is_facebook_channel? %}
{% for facebook_feeds in case.facebook_feed_items_non_draft %}
{% assign thread_url = facebook_feeds.public_url %}
<div class='interaction'>
<span class='gravatar-wrapper'>
{% if case.customer.id == facebook_feeds.from_customer.id %}
{% if case.customer.facebook.profile_image_url != nil %}
<img src="{{ case.customer.facebook.profile_image_url }}" class="gravatar" />
{% else %}
{{ facebook_feeds.agent.email | gravatar_image: gravatar_unknown_user, ssl }}
{% endif %}
{% else %}
{{ facebook_feeds.agent.email | gravatar_image: gravatar_unknown_user, ssl }}
{% endif %}
</span>
<div class='interaction-details'>
<div class='meta'>
{% if facebook_feeds.agent == nil %}
<span>{{ facebook_feeds.from_customer.name_public }}</span>
{% else %}
<span>{{ facebook_feeds.agent.name }} via {{ facebook_feeds.from_customer.name_public }}</span>
{% endif %}
<span class='date'>{{facebook_feeds.created_at | in_time_zone: site.timezone | date: '%b %d, %Y %I:%M%p' }}</span>
</div>
{% if facebook_feeds.is_erased? %}
{% capture params %}"name":"{{facebook_feeds.erased_by.name}}"{% endcapture %}
<div class='interaction-body'>{{desk.system.snippets.content_erased | format_snippet: params }}</div>
{% else %}
<div class='interaction-body'>{{ facebook_feeds.message | escape_newlines }}</div>
{% endif %}
</div>
</div>
{% endfor %}
<div class="case-footer">
<p><a href="{{ thread_url }}" target="_blank">View and reply to this thread on Facebook</a></p>
</div>
{% elsif case.is_phone_channel? %}
<div class='interaction'>
{{ case.description | escape_newlines }}
</div>
{% endif %}
</div>
{% if case.can_accept_replies and case.customer.id == desk.customer.id %}
<div id="desk-external-variables-email_new" class="desk-external-variables">
<div id="max_number_attachments">{{desk.system.max_attachments}}</div>
<div id="system-snippets-add_attachment">{{system.snippets.add_attachment}}</div>
</div>
<div style="clear:both;"></div>
<div id="form" class="{% if case.resolved? %}hidden{% endif %}">
{% if case.is_email_channel? %}
{{form_begin}}
<div class='input-block'>
<h4>{{desk.system.snippets.reply_to_this_case}}</h4>
<div>
<textarea id="interaction_body" name="interaction[body]"></textarea>
</div>
</div>
<div class='input-block'>
<span class='label'>
{{system.snippets.file_attachment}}
</span>
<div class="desk_file_upload">
<input name="case_attachment[attachment]" size="84" type="file"/>
<div class="faux-file-field">
<input type="text" disabled="disabled"/>
</div>
<input type="button" value="{{system.snippets.choose_file}}"/>
</div>
</div>
<br/>
<div class='input-button'>
<input id='reply_submit' name='commit' type='submit' value='{{system.snippets.send_text}}' />
</div>
{{form_end}}
{% else %}
{{form_begin}}
<div class='input-block'>
<h4>{{system.snippets.post_public_answer}}</h4>
<div>
<textarea id="interaction_body" name="interaction[body]"></textarea>
</div>
</div><br/>
<div class='input-button'>
<input id='reply_submit' name='commit' type='submit' value='{{system.snippets.post_answer}}' />
</div>
{{form_end}}
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.myportal_show.js"></script>
<!--end:myportal_show-->
{% elsif page == "login" %}
<!--begin:login-->
<div id="desk-external-variables-myportal_show" class="desk-external-variables">
<div id="system-snippets-email_required">{{system.snippets.email_required}}</div>
<div id="system-snippets-invalid_email">{{system.snippets.invalid_email}}</div>
<div id="system-snippets-password_required">{{system.snippets.password_required}}</div>
</div>
<div id='support-main'>
<div class='support-body'>
<div class='content'>
<h3>{{ site.company_name }} {{desk.system.snippets.login_title}}</h3>
<div id='form' class='login-form'>
{{desk.page.content.form}}
</div>
</div>
</div>
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.login.js"></script>
<!--end:login-->
{% elsif page == "registration" %}
<!--begin:registration-->
<div id="desk-external-variables-registration" class="desk-external-variables">
<div id="system-snippets-email_required">{{system.snippets.email_required}}</div>
<div id="system-snippets-invalid_email">{{system.snippets.invalid_email}}</div>
</div>
<div id='support-main'>
<div class='support-body'>
<div class='content'>
<h3>{{desk.system.snippets.registration_title}}</h3>
<div id='form' class='registration-form'>
{{desk.page.content.form}}
</div>
</div>
</div>
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.registration.js"></script>
<!--end:registration-->
{% elsif page == "forgot_password" %}
<!--begin:forgot_password-->
<div id="desk-external-variables-forgot_password" class="desk-external-variables">
<div id="system-snippets-email_required">{{system.snippets.email_required}}</div>
<div id="system-snippets-invalid_email">{{system.snippets.invalid_email}}</div>
</div>
<div id='support-main'>
<div class='support-body'>
<div class='content'>
<h3>{{desk.system.snippets.password_reset_title}}</h3>
<div id='form' class='forgotpw-form'>
{{desk.page.content.form}}
</div>
</div>
</div>
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.forgot_password.js"></script>
<!--end:forgot_password-->
{% elsif page == "myaccount" %}
<!--begin:myaccount-->
<div id="desk-external-variables-myaccount" class="desk-external-variables">
<div id="system-snippets-email_required">{{system.snippets.email_required}}</div>
<div id="system-snippets-invalid_email">{{system.snippets.invalid_email}}</div>
<div id="system-snippets-duplicate_email">{{system.snippets.duplicate_email}}</div>
</div>
<div id="notifications">
{% unless current_customer.verified? %}
{{system.snippets.account_not_verified}}
{% endunless %}
</div>
<div id='support-main'>
<div class='support-body'>
<div class='content'>
<h3>{{desk.system.snippets.account_title}}</h3>
<p>
{% if site.myportal_enabled %}
<a href='{{ desk.system.links.myportal }}'>{{desk.system.snippets.track_support_cases_clickable}}</a>{{desk.system.snippets.track_support_cases}}
{% else %}
{{system.snippets.verify_email_addresses}}
{% endif %}
</p>
<div id='form' class='myaccount-form'>
{{desk.page.content.form}}
</div>
</div>
</div>
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.myaccount.js"></script>
<!--end:myaccount-->
{% elsif page == "authentication_verification" %}
<!--begin:authentication_verification-->
<div id="desk-external-variables-authentication_verification" class="desk-external-variables">
<div id="system-snippets-email_required">{{system.snippets.email_required}}</div>
<div id="system-snippets-invalid_email">{{system.snippets.invalid_email}}</div>
</div>
<div id="notifications">
</div>
<div id='support-main'>
<div class='support-body'>
<div class='content'>
<h3 class="verify-title">{{desk.system.snippets.auth_verification_title}}</h3>
<div id="verification_step_1">
<div id='form' class='authentication_verification-form'>
{{desk.page.content.form}}
</div>
<div id="authentication-verification-copy">
<p>{{desk.system.snippets.authentication_verification_msg}}{% if twitter_screen_name != nil %} @{{twitter_screen_name}}{% endif %}!</p>
<p>{{desk.system.snippets.authentication_verification_note}}</p>
</div>
</div>
<div id="verification_step_2">
<p>{{verification_initiation_success}}</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.private.authenication.verifications_new.js"></script>
<!--end:authentication_verification-->
{% elsif page == "customer_feedback" %}
<!--begin:customer_feedback-->
<div id="desk-external-variables-customer-feedback" class="desk-external-variables">
</div>
<div id='support-main' class='main-customer-feedback'>
<div class='support-body'>
<div class='content'>
<h3>{{desk.system.snippets.customer_feedback_title}}</h3>
{% if customer_feedback.feedback_enabled? %}
{% if customer_feedback.expired? %}
<div class="customer-feedback-expired">
<h4>{{system.snippets.customer_feedback_expired}}</h4>
</div>
{% else %}
<div class='customer-feedback-case'>
<h4>{{desk.system.snippets.customer_feedback_case}} {{desk.system.snippets.case_id}}: {{ticket.id}}!</h4>
</div>
<div id="form">
{% form customer_feedback %}
<div class='input-block'>
<span class='label'>{{customer_feedback.question}}</span>
<div class='input-radio-group'>
<input id="customer-feedback-checked-rating" type="hidden" name="checked_rating" value="{{customer_feedback.rating}}">
{% if customer_feedback.yes_no_rating? %}
<input id="customer-feedback-rating0" name="customer_feedback[rating]" type="radio" value="0">
<img class="radio-label-rating-type"
src='{{ "/images/rating_type100_0.png" | portal_image_url: image_asset_host }}'>
<input id="customer-feedback-rating1" name="customer_feedback[rating]" type="radio" value="3">
<img class="radio-label-rating-type"
src='{{ "/images/rating_type100_3.png" | portal_image_url: image_asset_host }}'>
{% else %}
<input id="customer-feedback-rating0" name="customer_feedback[rating]" type="radio" value="0">
<img class="radio-label-rating-type"
src='{{ "/images/rating_type200_0.png" | portal_image_url: image_asset_host }}'>
<input id="customer-feedback-rating1" name="customer_feedback[rating]" type="radio" value="1">
<img class="radio-label-rating-type"
src='{{ "/images/rating_type200_1.png" | portal_image_url: image_asset_host }}'>
<input id="customer-feedback-rating2" name="customer_feedback[rating]" type="radio" value="2">
<img class="radio-label-rating-type"
src='{{ "/images/rating_type200_2.png" | portal_image_url: image_asset_host }}'>
<input id="customer-feedback-rating3" name="customer_feedback[rating]" type="radio" value="3">
<img class="radio-label-rating-type"
src='{{ "/images/rating_type200_3.png" | portal_image_url: image_asset_host }}'>
{% endif %}
</div>
</div>
{% if customer_feedback.additional_feedback_enabled? %}
<div class='input-block'>
<span class='label'>{{customer_feedback.additional_question}}</span>
<div>
<textarea name='customer_feedback[additional_feedback]' maxlength="1024">{{customer_feedback.additional_feedback}}</textarea>
</div>
</div>
{% endif %}
<div class='input-button'>
<input id='customer-feedback-submit' name='commit' type='submit' value='{{desk.system.snippets.customer_feedback_submit}}' />
</div>
{% endform %}
</div>
{% endif %}
{% else %}
<div class='customer-feedback-disabled'>
{{system.snippets.customer_feedback_disabled}}
</div>
{% endif %}
</div>
</div>
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.customer_feedback.js"></script>
<!--end:customer_feedback-->
{% elsif page == "customer_feedback_completed" %}
<!--begin:customer_feedback_completed-->
<div id='support-main' class='main-customer-feedback'>
<div class='support-body'>
<div class='content'>
<div class="complete">{{desk.system.snippets.customer_feedback_completed}}</div>
</div>
</div>
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.customer_feedback.js"></script>
<!--end:customer_feedback_completed-->
{%endif%}
<!--end:portal_body-->
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.shared.js"></script>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.header.js"></script>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.layout_footer.js"></script>
<script>
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment