profile-view-basics.client.view.html

<!-- Avatar+Name for mobile screens -->
<div class="text-center visible-xs-block" role="dialog">
  <a tr-avatar
     data-user="profileCtrl.profile"
     data-size="512"
     data-link="false"
     class="visible-xs-block avatar-circle"
     ng-click="profileCtrl.biggerAvatar = !profileCtrl.biggerAvatar"
     ng-class="{'profile-avatar-lg': profileCtrl.biggerAvatar}"
     aria-hidden="true"></a>
  <h2 class="profile-name"
      ng-show="profileCtrl.profile.displayName"
      ng-bind="profileCtrl.profile.displayName"></h2>
  <br>
  <h4 class="profile-username">
    @{{ profileCtrl.profile.displayUsername || profileCtrl.profile.username }}
  </h4>
  <br>
  <p class="profile-tagline"
     ng-show="profileCtrl.profile.tagline"
     ng-bind="profileCtrl.profile.tagline"></p>
</div>

<div class="panel panel-default profile-overview">
  <a ng-click="profileCtrl.toggleAvatarModal()">
    <avatar user="profileCtrl.profile" size="256" link="false" class="hidden-xs" aria-hidden="true"></avatar>
  </a>
  <div class="panel-body">

    <!-- Reply Rate -->
    <div class="profile-sidebar-section text-muted"
         ng-if="::(profileCtrl.profile.replyRate || profileCtrl.profile.replyTime)">
      <span ng-if="::profileCtrl.profile.replyRate">
        Reply rate {{ ::profileCtrl.profile.replyRate }}.
      </span>
      <span ng-if="::profileCtrl.profile.replyTime">
        <br>Replies within {{ ::profileCtrl.profile.replyTime }}.
      </span>
    </div>

    <div class="profile-sidebar-section" ng-if="profileCtrl.profile.birthdate || profileCtrl.profile.gender">
      <span ng-if="profileCtrl.profile.birthdate" ng-bind="profileCtrl.profile.birthdate | ageyears"></span><span ng-if="profileCtrl.profile.birthdate && profileCtrl.profile.gender">, </span>
      <span ng-if="profileCtrl.profile.gender" ng-class="{ 'text-capitalize': !profileCtrl.profile.birthdate }">{{ profileCtrl.profile.gender }}.</span>
    </div>

    <div class="profile-sidebar-section">
      <!-- A React component, includes Member since, Online ... ago  -->
      <!-- This component should expand to include all the fields here and replace this Angular component. -->
      <profile-view-basics profile="profileCtrl.profile"></profile-view-basics>
    </div>

    <div class="profile-sidebar-section" ng-if="profileCtrl.profile.locationLiving">
      <i class="icon-fw icon-building text-muted"></i>
      Lives in <a ui-sref="search.map({location: profileCtrl.profile.locationLiving})"
                  ng-bind="profileCtrl.profile.locationLiving"></a>
    </div>

    <div class="profile-sidebar-section" ng-if="profileCtrl.profile.locationFrom">
      <i class="icon-fw icon-home text-muted"></i>
      From <a ui-sref="search.map({location: profileCtrl.profile.locationFrom})"
              ng-bind="profileCtrl.profile.locationFrom"></a>
    </div>

    <div class="profile-sidebar-section" ng-if="profileCtrl.profile.languages.length">
      <h4 id="profile-languages">Languages</h4>
      <ul class="list-unstyled" aria-describedby="profile-languages">
        <li ng-repeat="code in profileCtrl.profile.languages track by code"
            ng-bind="::app.languageNames[code] || code"></li>
      </ul>
    </div>

    <div class="profile-sidebar-section"
         ng-if="profileCtrl.hasConnectedAdditionalSocialAccounts() || profileCtrl.profile.extSitesBW || profileCtrl.profile.extSitesCS || profileCtrl.profile.extSitesWS">
      <h4 id="profile-networks" aria-label="Member in other networks">
        Elsewhere
      </h4>
      <ul class="social-profiles list-unstyled"
          aria-describedby="profile-networks">
        <!--
          Facebook profile link is hidden here until issue with their API gets resolved
          See https://github.com/Trustroots/trustroots/issues/237
        -->
        <li class="social-profile"
            ng-repeat="(providerName, providerData) in profileCtrl.profile.additionalProvidersData track by providerName"
            ng-if="providerName !== 'facebook'">
          <i class="social-profile-icon icon-fw icon-lg icon-{{ ::providerName }}"></i>
          <a rel="noopener"
             class="social-profile-handle text-capitalize"
             ng-href="{{ ::profileCtrl.socialAccountLink(providerName, providerData) }}"
             ng-bind="::providerName"></a>
        </li>
        <li class="social-profile" ng-if="profileCtrl.profile.extSitesBW">
          <i class="social-profile-icon icon-fw icon-lg icon-bw"></i>
          <a rel="noopener"
             class="social-profile-handle"
             ng-href="https://www.bewelcome.org/members/{{ ::profileCtrl.profile.extSitesBW }}">
            BeWelcome
          </a>
        </li>
        <li class="social-profile" ng-if="profileCtrl.profile.extSitesCS">
          <i class="social-profile-icon icon-fw icon-lg icon-cs"></i>
          <!--
          Link here has `noreferrer` because;
          https://github.com/Trustroots/trustroots/issues/464
          -->
          <a rel="noreferrer noopener"
             class="social-profile-handle"
             ng-href="https://www.couchsurfing.com/people/{{ ::profileCtrl.profile.extSitesCS }}">
            Couchsurfing
          </a>
        </li>
        <li class="social-profile" ng-if="profileCtrl.profile.extSitesWS">
          <i class="social-profile-icon icon-fw icon-lg icon-warmshowers"></i>
          <a class="social-profile-handle"
             ng-href="https://www.warmshowers.org/{{ ::(profileCtrl.isWarmshowersId() ? 'user' : 'users') }}/{{ ::profileCtrl.profile.extSitesWS }}">
            Warmshowers
          </a>
        </li>
      </ul>
    </div>

  </div>
</div>

<span
  ng-if="::app.user._id !== profileCtrl.profile._id"
  tr-report-member="::profileCtrl.profile.username"
  ng-attr-title="Report member {{::profileCtrl.profile.username}} to support"></span>