request_page.hbs

<div class="my-activities-nav">
  <div class="container">
    <nav class="collapsible-nav">
      <button type="button" class="collapsible-nav-toggle" aria-label="{{t 'toggle_navigation'}}" aria-expanded="false">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12"
          aria-hidden="true" class="collapsible-nav-toggle-icon chevron-icon">
          <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5" />
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12"
          aria-hidden="true" class="collapsible-nav-toggle-icon x-icon">
          <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3" />
        </svg>
      </button>
      <ul class="collapsible-nav-list">
        <li aria-selected=true>{{t 'requests'}}</li>
        <li>{{link 'contributions'}}</li>
        <li>{{link 'subscriptions'}}</li>
      </ul>
    </nav>
  </div>
</div>

<div class="container container-spacing">
  <div class="sub-nav">{{breadcrumbs}}</div>

  <h1 class="request-title">{{request.subject}}</h1>

  <div id="main-content" class="request-container">
    <section class="request-main">
      {{satisfaction}}
      <ul class="comment-list">
        {{#each comments}}
        <li id="{{anchor}}" class="comment">
          <div class="comment-wrapper">
            <div class="comment-info">
              <div class="comment-author">
                <div class="avatar comment-avatar">
                  {{#if author.agent}}
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12"
                    class="icon-agent">
                    <path fill="currentColor"
                      d="M6 0C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm0 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm2.3 7H3.7c-.3 0-.4-.3-.3-.5C3.9 7.6 4.9 7 6 7s2.1.6 2.6 1.5c.1.2 0 .5-.3.5z" />
                  </svg>
                  {{/if}}
                  <img src="{{author.avatar_url}}" alt="" class="user-avatar" />
                </div>

                <div class="comment-meta">
                  <span title="{{author.name}}">
                    {{#link 'user_profile' id=author.id}}
                    {{author.name}}
                    {{/link}}
                  </span>

                  <ul class="meta-group">
                    <li class="meta-data">{{date created_at timeago=true}}</li>
                  </ul>
                </div>
              </div>

              <section class="comment-body">{{body}}</section>

              {{#if attachments}}
              <ul class="attachments">
                {{#each attachments}}
                <li class="attachment-item">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16"
                    class="attachment-icon">
                    <path fill="none" stroke="currentColor" stroke-linecap="round"
                      d="M9.5 4v7.7c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5V3C6.5 1.6 7.6.5 9 .5s2.5 1.1 2.5 2.5v9c0 1.9-1.6 3.5-3.5 3.5S4.5 13.9 4.5 12V4" />
                  </svg>
                  <a href="{{url}}" target="_blank">{{name}}</a>
                  <div class="attachment-meta meta-group">
                    <span class="attachment-meta-item meta-data">{{size}}</span>
                    <a href="{{url}}" target="_blank" class="attachment-meta-item meta-data">{{t 'download'}}</a>
                  </div>
                </li>
                {{/each}}
              </ul>
              {{/if}}
            </div>
          </div>
        </li>
        {{/each}}
      </ul>

      {{pagination}}

      <div class="request-follow-up">
        {{comment_callout}}
      </div>

      {{#form 'comment' class='comment-form'}}
      <div class="avatar comment-avatar">
        {{user_avatar class='user-avatar'}}
      </div>

      <div class="comment-container">
        <button type="button" class="comment-show-container {{#validate 'body'}}hidden{{/validate}}">
          {{t 'add_to_conversation'}}
        </button>

        <div class="comment-fields {{#validate 'body'}}shown{{/validate}}">
          {{#if help_center.request_ccs_enabled}}
          <div class="comment-ccs form-field">
            {{token_field 'ccs' class='ccs-input'}}
          </div>
          {{/if}}

          {{wysiwyg 'body' rows='7'}}

          <div class="comment-attachments">
            {{upload}}
          </div>
        </div>

        <div class="comment-form-controls">
          {{checkbox 'mark_as_solved'}}

          {{#if request.can_be_marked_as_solved}}
          <button type="button" class="button-large button-secondary mark-as-solved"
            data-solve-translation="{{t 'mark_as_solved'}}"
            data-solve-and-submit-translation="{{t 'mark_as_solved_and_submit'}}">
            {{t 'mark_as_solved'}}
          </button>
          {{/if}}

          <span class="request-submit-comment {{#validate 'body'}}shown{{/validate}}">
            {{input type='submit' class="button button-large"}}
          </span>
        </div>
      </div>
      {{/form}}
    </section>

    <section class="request-sidebar collapsible-sidebar">
      <button type="button" class="collapsible-sidebar-toggle" aria-labelledby="request-sidebar-title"
        aria-expanded="false">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12"
          aria-hidden="true" class="collapsible-sidebar-toggle-icon chevron-icon">
          <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5" />
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12"
          aria-hidden="true" class="collapsible-sidebar-toggle-icon x-icon">
          <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3" />
        </svg>
      </button>
      <h2 id="request-sidebar-title" class="collapsible-sidebar-title">
        {{t 'ticket_details'}}
      </h2>
      <div class="collapsible-sidebar-body">
        {{#if request.followup_source_id}}
        <dl class="request-details">
          <dt>{{t 'followup'}}</dt>
          <dd>{{link 'request' id=request.followup_source_id}}</dd>
        </dl>
        {{/if}}

        <dl class="request-details">
          <dt>{{t 'requester'}}</dt>
          <dd>{{request.requester.name}}</dd>

          <dt>{{t 'created'}}</dt>
          <dd>{{date request.created_at}}</dd>

          <dt>{{t 'last_activity'}}</dt>
          <dd>{{date request.updated_at}}</dd>

          {{#if collaborators}}
          <dt>{{t 'ccs'}}</dt>
          <dd>
            <ul class="request-collaborators">
              {{#each collaborators}}
              <li title="{{name}}">{{name}}</li>
              {{/each}}
            </ul>
          </dd>
          {{/if}}
        </dl>

        <dl class="request-details">
          {{#if assignee}}
          <dt>{{t 'assignee'}}</dt>
          <dd>
            {{assignee.name}}
          </dd>
          {{/if}}

          <dt>{{t 'id'}}</dt>
          <dd>#{{request.id}}</dd>

          {{#form 'organization' id='request-organization'}}
          <dt>{{t 'organization'}}</dt>
          <dd>{{select 'organization'}}</dd>
          {{/form}}

          {{#if group}}
          <dt>{{t 'group'}}</dt>
          <dd>
            {{group.name}}
          </dd>
          {{/if}}

          <dt>{{t 'status'}}</dt>
          <dd>
            <span class="status-label status-label-{{request.status}}" title="{{request.status_description}}">
              {{request.status_name}}
            </span>
          </dd>

          {{#if request.type}}
          <dt>{{request.type_title}}</dt>
          <dd>
            {{request.type_name}}
            {{#is request.type 'task'}}
            {{t 'task_due_date' due_date=request.due_date}}
            {{/is}}
          </dd>
          {{/if}}

          {{#if request.priority}}
          <dt>{{request.priority_title}}</dt>
          <dd>
            {{request.priority_name}}
          </dd>
          {{/if}}

          {{#each custom_fields}}
          <dt>{{title}}</dt>
          <dd>
            {{value}}
          </dd>
          {{/each}}
        </dl>

        {{#if attachments}}
        <dl class="request-details request-attachments">
          <dt>{{t 'attachments_heading'}}</dt>
          <dd>
            <ul class="attachments">
              {{#each attachments}}
              <li class="attachment-item">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16"
                  class="attachment-icon">
                  <path fill="none" stroke="currentColor" stroke-linecap="round"
                    d="M9.5 4v7.7c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5V3C6.5 1.6 7.6.5 9 .5s2.5 1.1 2.5 2.5v9c0 1.9-1.6 3.5-3.5 3.5S4.5 13.9 4.5 12V4" />
                </svg>
                <a href="{{url}}" target="_blank">{{name}}</a>
                <div class="attachment-meta meta-group">
                  <span class="attachment-meta-item meta-data">{{size}}</span>
                  <a href="{{url}}" target="_blank" class="attachment-meta-item meta-data">{{t 'download'}}</a>
                </div>
              </li>
              {{/each}}
            </ul>
          </dd>
        </dl>
        {{/if}}
      </div>
    </section>
  </div>
</div>