<header id="main-content" class="profile-header">
  <div class="container">
    <div class="profile-info">
      <div class="avatar profile-avatar">
        {{#if user.agent}}
           <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="icon-agent" aria-label="{{t 'team_member' name=user.name}}">
            <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 class="user-avatar" src="{{user.avatar_url}}" alt=""/>
      </div>
      <div class="basic-info">
        <div class="community-name-and-title-badges">
          <h1 class="name">
            {{#if user.url}}
              <a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}">{{user.name}}</a>
            {{else}}
              {{user.name}}
            {{/if}}
          </h1>

          <div hidden="true" aria-label="{{t 'badges'}}"></div>
          {{#each (filter user.badges on="category_slug" equals="titles")}}
            <span class="community-badge community-badge-title" title="{{description}}" aria-label="{{name}}">
              {{name}}
            </span>
          {{/each}}
        </div>
        <div aria-label="{{t 'badges'}}" class="community-badge-container-achievements">
          {{#each (
            slice
              (
                filter
                  (filter user.badges on="category_slug" equals="achievements")
                  on="icon_url"
                  starts_with="https"
              )
              0
              4
            )
          }}
            <div class="community-badge community-badge-achievements">
              <img src="{{icon_url}}" alt="{{name}}" title="{{name}} | {{description}}" />
            </div>
          {{/each}}

          {{#if (compare (calc user.badges.length "-" 4) ">" 0)}}
            <div class="community-badge community-badge-achievements">
              <a href="{{page_path "user_profile" id=user.id filter_by="badges"}}" class="community-badge-achievements-rest" aria-label="{{t 'more_awards_to' count=(calc user.badges.length "-" 4) name=user.name}}">
                {{t 'plus_more' count=(calc user.badges.length "-" 4)}}
              </a>
            </div>
          {{/if}}
        </div>
      </div>
      <div class="options">
        {{#if private_profile}}
          <span class="profile-private-badge">
            {{t 'private'}}
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="profile-private-icon">
              <path fill="none" stroke="currentColor" d="M3.5 5.5V3a2.5 2.5 0 015 0v2.5"/>
              <rect width="10" height="7" x="1" y="5" fill="currentColor" rx="1" ry="1"/>
            </svg>
          </span>
        {{/if}}
        {{actions class='user-profile-actions split-button'}}
        <div class="community-follow">
          {{subscribe}}
        </div>
      </div>

      {{#if description}}
        <p class="description">{{description}}</p>
      {{/if}}

      <ul class="profile-stats profile-stats-activity">
        <li class="stat">
          <span class="stat-label">{{t 'total_activity'}}</span>
          <span class="stat-value" id="total-activity">{{total_activity}}</span>
        </li>
        <li class="stat">
          <span class="stat-label">{{t 'last_activity'}}</span>
          <span class="stat-value">
            {{#if last_activity_at}}
              {{date last_activity_at timeago=true}}
            {{else}}
              {{t 'no_activity_yet'}}
            {{/if}}
          </span>
        </li>
        <li class="stat">
          <span class="stat-label">{{t 'member_since'}}</span>
          <span class="stat-value">
            {{#if member_since}}
              {{date member_since format='medium'}}
            {{else}}
              {{t 'no_activity_yet'}}
            {{/if}}
          </span>
        </li>
      </ul>
    </div>
    <ul class="profile-stats profile-stats-counters">
      <li class="stat">
        <span class="stat-label">{{t 'following_users'}}</span>
        <span class="stat-value" id="following-count">{{t 'users_count' count=following_count}}</span>
      </li>
      <li class="stat">
        <span class="stat-label">{{t 'followed_by'}}</span>
        <span class="stat-value" id="follower-count">{{t 'users_count' count=follower_count}}</span>
      </li>
      <li class="stat">
        <span class="stat-label">{{t 'votes'}}</span>
        <span class="stat-value" id="vote-count">{{vote_count}}</span>
      </li>
      <li class="stat">
        <span class="stat-label">{{t 'subscriptions'}}</span>
        <span class="stat-value" id="subscription-count">{{subscription_count}}</span>
      </li>
    </ul>
  </div>
</header>

{{#if visible}}

  {{#if member_since}}

    <div class="profile-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">
            {{#each filters}}
              {{#if selected}}
                <li class="current"><a href="{{url}}" aria-current="page">{{name}}</a></li>
              {{else}}
                <li><a href="{{url}}">{{name}}</a></li>
              {{/if}}
            {{/each}}
          </ul>
        </nav>
      </div>
    </div>

    {{#is current_filter.identifier 'activities'}}
      <div class="container">
        <section class="profile-section">

          {{#if activities}}

            <header class="profile-section-header">
              <h2 class="profile-section-title">{{t 'activity_overview'}}</h2>
              <span class="profile-section-description">{{t 'latest_activity' name=user.name}}</span>
            </header>

            <ul class="profile-activity-list">
              {{#each activities}}

                <li class="profile-activity profile-activity-{{type}}">
                  <span aria-hidden="true" class="profile-activity-icon">
                    {{#contains type "article"}}
                      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" focusable="false" viewBox="0 0 12 12">
                        <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3.5 5.5h5m-5 2h5m-5 2h5m2-6.29V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5"/>
                      </svg>
                    {{/contains}}
                    {{#contains type "post"}}
                      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" focusable="false" viewBox="0 0 12 12">
                        <path fill="none" stroke="currentColor" stroke-linecap="round" d="M1.5 6.5H1C.7 6.5.5 6.3.5 6V1C.5.7.7.5 1 .5h7c.3 0 .5.2.5.5v2.5m-6-1h4m-1 5h4m-4 2h4M4 5.5h7c.3 0 .5.2.5.5v5c0 .3-.2.5-.5.5H4c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5z"/>
                      </svg>
                    {{/contains}}
                    {{#contains type "comment"}}
                      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" focusable="false" viewBox="0 0 12 12">
                        <path fill="none" stroke="currentColor" d="M1 .5h10c.3 0 .5.2.5.5v7c0 .3-.2.5-.5.5H6l-2.6 2.6c-.3.3-.9.1-.9-.4V8.5H1C.7 8.5.5 8.3.5 8V1C.5.7.7.5 1 .5z"/>
                      </svg>
                    {{/contains}}
                  </span>
                  <header class="profile-activity-header">
                    <img class="user-avatar" src="{{../user.avatar_url}}" alt=""/>
                    <p class="profile-activity-description">{{label}}</p>
                  </header>

                  {{#with contribution}}
                    <div class="profile-activity-contribution profile-contribution">
                      <header class="profile-contribution-header">
                        {{#isnt object_type 'comment'}}
                          <h3 class="profile-contribution-title"><a href="{{url}}">{{title}}</a></h3>
                        {{/isnt}}

                        {{#isnt status 'none'}}
                            <span class="status-label status-label-{{status_dasherized}}">{{status_name}}</span>
                        {{/isnt}}

                        {{#if pending}}
                          <span class="status-label status-label-pending-moderation">{{t 'pending_approval'}}</span>
                        {{/if}}

                        {{#if official}}
                          <span class="status-label status-label-official">{{t 'official_comment'}}</span>
                        {{/if}}
                      </header>

                      <ol class="breadcrumbs profile-contribution-breadcrumbs">
                        {{#each path_steps}}
                          <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
                        {{/each}}
                      </ol>

                      <p class="profile-contribution-body">{{excerpt body characters=200}}</p>

                      <ul class="meta-group">
                        {{#is object_type 'comment'}}
                          <li class="meta-data">
                            <a class="comment-link" href={{url}}>{{t 'view_comment'}}</a>
                          </li>
                        {{/is}}
                        <li class="meta-data">{{author.name}}</li>
                        {{#if editor}}
                          <li class="meta-data">{{date edited_at timeago=true}}</li>
                          <li class="meta-data">
                            {{#is object_type 'article'}}
                              {{t 'updated'}}
                            {{else}}
                              {{t 'edited'}}
                            {{/is}}
                          </li>
                        {{else}}
                          <li class="meta-data">{{date created_at timeago=true}}</li>
                        {{/if}}
                        {{#each stats}}
                          <li class="meta-data">{{label}}</li>
                        {{/each}}
                      </ul>
                    </div>
                  {{/with}}
                </li>

              {{/each}}
            </ul>

          {{/if}}

          {{#unless activities}}
            <span class="no-activity">{{t 'no_contributions'}}</span>
          {{/unless}}

        </section>
      </div>
    {{/is}}

    {{#is current_filter.identifier 'badges'}}
      <div class="container">
        <section class="profile-section">

          {{#if user.badges}}
            <header class="profile-section-header">
              <h2 class="profile-section-title">{{t 'badges'}}</h2>
              <span class="profile-section-description">{{t 'badges_description' name=user.name}}</span>
            </header>

            <ul class="profile-badges-items">
              {{#each user.badges}}
                <li role="region" class="profile-badges-item" aria-labelledby="title-{{id}}" aria-describedby="desc-{{id}}">
                  <div class="profile-badges-item-image">
                    {{#if icon_url}}
                      <img class="badge" src="{{icon_url}}" alt="">
                    {{/if}}
                  </div>
                  <div>
                    <div id="title-{{id}}" class="profile-badges-item-title">
                      {{name}}
                    </div>
                    <p id="desc-{{id}}" class="profile-badges-item-description">
                      {{description}}
                    </p>
                  </div>
                  <div class="profile-badges-item-metadata">
                    <div class="profile-badges-item-metadata-title">
                      {{t 'badges_awarded'}}
                    </div>
                    <p class="profile-badges-item-metadata-description">
                      {{date assigned_at format='medium'}}
                    </p>
                  </div>
                </li>
              {{/each}}
            </ul>
          {{else}}
            <span class="no-activity">{{t 'no_badges'}}</span>
          {{/if}}
        </section>
      </div>

    {{/is}}

    {{#isnt current_filter.identifier 'activities'}}
      {{#isnt current_filter.identifier 'badges'}}
        <div class="container">
          <section class="profile-section">

            {{#if contributions}}

              <header class="profile-section-header">
                <h2 class="profile-section-title">{{t current_filter.identifier}}</h2>
                {{#if sorters}}
                  <span class="profile-section-description">{{sorter_description}}</span>
                  <span class="profile-section-sorter dropdown">
                    <button class="dropdown-toggle" aria-haspopup="true">
                      {{current_sorter.label}}
                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="dropdown-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>
                    </button>
                    <span class="dropdown-menu" role="menu">
                      {{#each sorters}}
                        <a href="{{url}}" aria-selected="{{selected}}" role="menuitem">
                          {{name}}
                        </a>
                      {{/each}}
                    </span>
                  </span>
                {{/if}}
              </header>

              <ul class="profile-contribution-list profile-{{current_filter.identifier}}">
                {{#each contributions}}

                  <li class="profile-contribution">
                    <span class="profile-contribution-icon" aria-hidden="true">
                      {{#is object_type "article"}}
                        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" focusable="false" viewBox="0 0 12 12">
                          <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3.5 5.5h5m-5 2h5m-5 2h5m2-6.29V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5"/>
                        </svg>
                      {{/is}}
                      {{#is object_type "post"}}
                        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" focusable="false" viewBox="0 0 12 12">
                          <path fill="none" stroke="currentColor" stroke-linecap="round" d="M1.5 6.5H1C.7 6.5.5 6.3.5 6V1C.5.7.7.5 1 .5h7c.3 0 .5.2.5.5v2.5m-6-1h4m-1 5h4m-4 2h4M4 5.5h7c.3 0 .5.2.5.5v5c0 .3-.2.5-.5.5H4c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5z"/>
                        </svg>
                      {{/is}}
                      {{#is object_type "comment"}}
                        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" focusable="false" viewBox="0 0 12 12">
                          <path fill="none" stroke="currentColor" d="M1 .5h10c.3 0 .5.2.5.5v7c0 .3-.2.5-.5.5H6l-2.6 2.6c-.3.3-.9.1-.9-.4V8.5H1C.7 8.5.5 8.3.5 8V1C.5.7.7.5 1 .5z"/>
                        </svg>
                      {{/is}}
                    </span>
                    <header class="profile-contribution-header">
                      {{#isnt object_type 'comment'}}
                        <h3 class="profile-contribution-title"><a href="{{url}}">{{title}}</a></h3>
                      {{/isnt}}

                      {{#isnt status 'none'}}
                          <span class="status-label status-label-{{status_dasherized}}">{{status_name}}</span>
                      {{/isnt}}

                      {{#if pending}}
                        <span class="status-label status-label-pending-moderation">{{t 'pending_approval'}}</span>
                      {{/if}}

                      {{#if official}}
                        <span class="status-label status-label-official">{{t 'official_comment'}}</span>
                      {{/if}}
                    </header>

                    <ol class="breadcrumbs profile-contribution-breadcrumbs">
                      {{#each path_steps}}
                        <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
                      {{/each}}
                    </ol>

                    <p class="profile-contribution-body">{{excerpt body characters=200}}</p>

                    <ul class="meta-group">
                      {{#is object_type 'comment'}}
                        <li class="meta-data">
                          <a class="comment-link" href={{url}}>{{t 'view_comment'}}</a>
                        </li>
                      {{/is}}
                      <li class="meta-data">{{author.name}}</li>
                      {{#if editor}}
                        <li class="meta-data">{{date edited_at timeago=true}}</li>
                        <li class="meta-data">
                          {{#is object_type 'article'}}
                            {{t 'updated'}}
                          {{else}}
                            {{t 'edited'}}
                          {{/is}}
                        </li>
                      {{else}}
                        <li class="meta-data">{{date created_at timeago=true}}</li>
                      {{/if}}
                      {{#each stats}}
                        <li class="meta-data">{{label}}</li>
                      {{/each}}
                    </ul>
                  </li>

                {{/each}}
              </ul>

              {{pagination}}

            {{/if}}

            {{#unless contributions}}
              <span class="no-activity">{{t 'no_contributions'}}</span>
            {{/unless}}

          </section>
        </div>
      {{/isnt}}
    {{/isnt}}

  {{/if}}

  {{#unless member_since}}
    <div class="container">
      <section class="profile-section">
        <span class="no-activity">{{t 'no_content_yet'}}</span>
      </section>
    </div>
  {{/unless}}

{{/if}}

{{#unless visible}}
  <div class="container">
    <section class="profile-section">
      <span class="private-activity">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="private-activity-icon">
          <path fill="none" stroke="currentColor" d="M3.5 5.5V3a2.5 2.5 0 015 0v2.5"/>
          <rect width="10" height="7" x="1" y="5" fill="currentColor" rx="1" ry="1"/>
        </svg>
        {{t 'private_activity'}}
      </span>
    </section>
  </div>
{{/unless}}
