{{#styleguide-example title=".user-main .about.collapsed-info.no-background"}}
  {{#d-section class="user-main"}}
    <section class="collapsed-info about no-background">
      <div class="profile-image"></div>
      <div class="details">
        <div class="primary">
          {{bound-avatar dummy.user "huge"}}
          <section class="controls">
            <ul>
              <li>
                <a class="btn btn-primary">
                  {{d-icon "envelope"}}
                  {{i18n "user.private_message"}}
                </a>
              </li>
              <li><a href={{dummy.user.adminPath}} class="btn">{{d-icon "wrench"}}{{i18n "admin.user.show_admin_profile"}}</a></li>
              <li><a href="#" class="btn">{{d-icon "angle-double-down"}}{{i18n "user.expand_profile"}}</a></li>
            </ul>
          </section>

          <div class="primary-textual">
            <h1 class="username">{{dummy.user.username}} {{d-icon "shield-alt"}}</h1>
            <h2 class="full-name">{{dummy.user.name}}</h2>
            <h3>{{dummy.user.title}}</h3>
          </div>
        </div>
        <div style="clear: both"></div>
      </div>
    </section>
  {{/d-section}}
{{/styleguide-example}}

{{#styleguide-example title=".user-main .about.collapsed-info.has-background"}}
  {{#d-section class="user-main"}}
    <section class="collapsed-info about has-background"  style={{dummy.user.profileBackground}}>
      <div class="profile-image"></div>
      <div class="details">
        <div class="primary">
          {{bound-avatar dummy.user "huge"}}
          <section class="controls">
            <ul>
              <li>
                <a class="btn btn-primary">
                  {{d-icon "envelope"}}
                  {{i18n "user.private_message"}}
                </a>
              </li>
              <li><a href={{dummy.user.adminPath}} class="btn">{{d-icon "wrench"}}{{i18n "admin.user.show_admin_profile"}}</a></li>
              <li><a href="#" class="btn">{{d-icon "angle-double-down"}}{{i18n "user.expand_profile"}}</a></li>
            </ul>
          </section>

          <div class="primary-textual">
            <h1 class="username">{{dummy.user.username}} {{d-icon "shield-alt"}}</h1>
            <h2 class="full-name">{{dummy.user.name}}</h2>
            <h3>{{dummy.user.title}}</h3>
          </div>
        </div>
        <div style="clear: both"></div>
      </div>
    </section>
  {{/d-section}}
{{/styleguide-example}}

{{#styleguide-example title=".user-main .about.no-background"}}
  {{#d-section class="user-main"}}
    <section class="about no-background">

      <div class="staff-counters">
        <div><span class="helpful-flags">{{dummy.user.number_of_flags_given}}</span>&nbsp;{{i18n "user.staff_counters.flags_given"}}</div>
        <div>
          <a href="#">
            <span class="flagged-posts">{{dummy.user.number_of_flagged_posts}}</span>&nbsp;{{i18n "user.staff_counters.flagged_posts"}}
          </a>
        </div>
        <div>
          <a href="#">
            <span class="deleted-posts">{{dummy.user.number_of_deleted_posts}}</span>&nbsp;{{i18n "user.staff_counters.deleted_posts"}}
          </a>
        </div>
        <div><span class="suspensions">{{dummy.user.number_of_suspensions}}</span>&nbsp;{{i18n "user.staff_counters.suspensions"}}</div>
        <div><span class="warnings-received">{{dummy.user.warnings_received_count}}</span>&nbsp;{{i18n "user.staff_counters.warnings_received"}}</div>
      </div>

      <div class="profile-image"></div>
      <div class="details">
        <div class="primary">
          {{bound-avatar dummy.user "huge"}}
          <section class="controls">
            <ul>
              <li>
                <a class="btn btn-primary">
                  {{d-icon "envelope"}}
                  {{i18n "user.private_message"}}
                </a>
              </li>
              <li><a href={{dummy.user.adminPath}} class="btn">{{d-icon "wrench"}}{{i18n "admin.user.show_admin_profile"}}</a></li>
            </ul>
          </section>

          <div class="primary-textual">
            <h1 class="username">{{dummy.user.username}} {{d-icon "shield-alt"}}</h1>
            <h2 class="full-name">{{dummy.user.name}}</h2>
            <h3>{{dummy.user.title}}</h3>
            <h3>
              {{d-icon "map-marker-alt"}} {{dummy.user.location}}
              {{d-icon "globe"}}
              <a href={{dummy.user.website}} rel="nofollow noopener noreferrer" target="_blank">{{dummy.user.website_name}}</a>
            </h3>

            <div class="bio">
              <div class="suspended">
                {{d-icon "ban"}}
                <b>{{i18n "user.suspended_notice" date=dummy.user.suspendedTillDate}}</b><br>
                <b>{{i18n "user.suspended_reason"}}</b> {{dummy.user.suspend_reason}}
              </div>
              {{html-safe dummy.user.bio_cooked}}
            </div>

            <div class="public-user-fields">
              {{#each dummy.user.publicUserFields as |uf|}}
                {{#if uf.value}}
                  <div class="public-user-field {{uf.field.dasherized_name}}">
                    <span class="user-field-name">{{uf.field.name}}</span>:
                    <span class="user-field-value">{{uf.value}}</span>
                  </div>
                {{/if}}
              {{/each}}
            </div>
          </div>
        </div>
        <div style="clear: both"></div>
      </div>

      <div class="secondary">
        <dl>
          <dt>{{i18n "user.created"}}</dt><dd>{{bound-date dummy.user.created_at}}</dd>
          <dt>{{i18n "user.last_posted"}}</dt><dd>{{bound-date dummy.user.last_posted_at}}</dd>
          <dt>{{i18n "user.last_seen"}}</dt><dd>{{bound-date dummy.user.last_seen_at}}</dd>
          <dt>{{i18n "views"}}</dt><dd>{{dummy.user.profile_view_count}}</dd>
          <dt class="invited-by">{{i18n "user.invited_by"}}</dt><dd class="invited-by"><a href="#">{{dummy.user.invited_by.username}}</a></dd>
          <dt class="trust-level">{{i18n "user.trust_level"}}</dt><dd class="trust-level">{{dummy.user.trustLevel.name}}</dd>
          <dt>{{i18n "user.email.title"}}</dt>
          <dd title={{dummy.user.email}}>
            {{d-button icon="far-envelope" label="admin.users.check_email.text" class="btn-primary"}}
          </dd>
          <dt class="groups">{{i18n "groups.title" count=dummy.user.displayGroups.length}}</dt>
          <dd class="groups">
            {{#each dummy.user.displayGroups as |group|}}
              <span><a href="#" class="group-link">{{group.name}}</a></span>
            {{/each}}
          </dd>
          {{d-button icon="exclamation-triangle" label="user.admin_delete" class="btn-danger"}}
        </dl>
      </div>
    </section>
  {{/d-section}}
{{/styleguide-example}}

{{#styleguide-example title=".user-main .about.has-background"}}
  {{#d-section class="user-main"}}
    <section class="about has-background"  style={{dummy.user.profileBackground}}>
      <div class="staff-counters">
        <div><span class="helpful-flags">{{dummy.user.number_of_flags_given}}</span>&nbsp;{{i18n "user.staff_counters.flags_given"}}</div>
        <div>
          <a href="#">
            <span class="flagged-posts">{{dummy.user.number_of_flagged_posts}}</span>&nbsp;{{i18n "user.staff_counters.flagged_posts"}}
          </a>
        </div>
        <div>
          <a href="#">
            <span class="deleted-posts">{{dummy.user.number_of_deleted_posts}}</span>&nbsp;{{i18n "user.staff_counters.deleted_posts"}}
          </a>
        </div>
        <div><span class="suspensions">{{dummy.user.number_of_suspensions}}</span>&nbsp;{{i18n "user.staff_counters.suspensions"}}</div>
        <div><span class="warnings-received">{{dummy.user.warnings_received_count}}</span>&nbsp;{{i18n "user.staff_counters.warnings_received"}}</div>
      </div>

      <div class="profile-image"></div>
      <div class="details">
        <div class="primary">
          {{bound-avatar dummy.user "huge"}}
          <section class="controls">
            <ul>
              <li>
                <a class="btn btn-primary">
                  {{d-icon "envelope"}}
                  {{i18n "user.private_message"}}
                </a>
              </li>
              <li><a href={{dummy.user.adminPath}} class="btn">{{d-icon "wrench"}}{{i18n "admin.user.show_admin_profile"}}</a></li>
            </ul>
          </section>

          <div class="primary-textual">
            <h1 class="username">{{dummy.user.username}} {{d-icon "shield-alt"}}</h1>
            <h2 class="full-name">{{dummy.user.name}}</h2>
            <h3>{{dummy.user.title}}</h3>
            <h3>
              {{d-icon "map-marker-alt"}} {{dummy.user.location}}
              {{d-icon "globe"}}
              <a href={{dummy.user.website}} rel="nofollow noopener noreferrer" target="_blank">{{dummy.user.website_name}}</a>
            </h3>

            <div class="bio">
              <div class="suspended">
                {{d-icon "ban"}}
                <b>{{i18n "user.suspended_notice" date=dummy.user.suspendedTillDate}}</b><br>
                <b>{{i18n "user.suspended_reason"}}</b> {{dummy.user.suspend_reason}}
              </div>
              {{html-safe dummy.user.bio_cooked}}
            </div>

            <div class="public-user-fields">
              {{#each dummy.user.publicUserFields as |uf|}}
                {{#if uf.value}}
                  <div class="public-user-field {{uf.field.dasherized_name}}">
                    <span class="user-field-name">{{uf.field.name}}</span>:
                    <span class="user-field-value">{{uf.value}}</span>
                  </div>
                {{/if}}
              {{/each}}
            </div>

          </div>
        </div>
        <div style="clear: both"></div>
      </div>

      <div class="secondary">
        <dl>
          <dt>{{i18n "user.created"}}</dt><dd>{{bound-date dummy.user.created_at}}</dd>
          <dt>{{i18n "user.last_posted"}}</dt><dd>{{bound-date dummy.user.last_posted_at}}</dd>
          <dt>{{i18n "user.last_seen"}}</dt><dd>{{bound-date dummy.user.last_seen_at}}</dd>
          <dt>{{i18n "views"}}</dt><dd>{{dummy.user.profile_view_count}}</dd>
          <dt class="invited-by">{{i18n "user.invited_by"}}</dt><dd class="invited-by"><a href="#">{{dummy.user.invited_by.username}}</a></dd>
          <dt class="trust-level">{{i18n "user.trust_level"}}</dt><dd class="trust-level">{{dummy.user.trustLevel.name}}</dd>
          <dt>{{i18n "user.email.title"}}</dt>
          <dd title={{dummy.user.email}}>
            {{d-button icon="far-envelope" label="admin.users.check_email.text" class="btn-primary"}}
          </dd>
          <dt class="groups">{{i18n "groups.title" count=dummy.user.displayGroups.length}}</dt>
          <dd class="groups">
            {{#each dummy.user.displayGroups as |group|}}
              <span><a href="#" class="group-link">{{group.name}}</a></span>
            {{/each}}
          </dd>
          {{d-button icon="exclamation-triangle" label="user.admin_delete" class="btn-danger"}}
        </dl>
      </div>
    </section>
  {{/d-section}}
{{/styleguide-example}}
