<span dynamic-content="$root.MESSAGES.profileHeader.content | html"></span>
<div class="profile-header">
  <div class="row">
    <profile-picture ng-if="profile.profileData.person.contactId" contact-id="profile.profileData.person.contactId"></profile-picture>
    <div class="profile-desc col-xs-7 col-sm-9">
      <h3 class="profile-name">{{profile.profileData.person.nickName}} {{profile.profileData.person.lastName}}</h3>
      <!-- Handle a null church site here with something like "Please select your site" currently it's just blank when null-->
      <p class="lead site-name">
        <a href="#Site" ng-click="profile.locationFocus()" data-toggle="tab" class="edit-church-site" ng-class="profile.showLocationButton()">{{profile.displayLocation()}}
          <svg viewBox="0 0 32 32" class="icon icon-pencil4">
            <use xlink:href="#pencil4"></use>
          </svg>
        </a>
      </p>
      <!-- Mock for future profile progress bar
      <div class="col-sm-6 row">
        <progressbar value="55">55%</progressbar>
      </div>
      -->
    </div>
  </div>
</div>
<ng-form name="profile.profileParentForm">
  <tabset>
    <tab ng-repeat="tab in profile.tabs" heading="{{tab.title}}" active="tab.active" ng-click="profile.goToTab(tab)" class="{{tab.class}}" >
      <ui-view ng-if="tab.active"></ui-view>
    </tab>
    <li role="tab" class="dropdown hidden-md hidden-lg hidden-sm dropdown-toggle" dropdown is-open="status.isopen">
      <a id="moreTab" dropdown-toggle ng-disabled="disabled">More <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li ng-repeat="tab in profile.tabs | filter:tab.title==='Personal'"><a href="" ng-click="profile.goToTab(tab)">{{tab.title}}</a>
        </li>
      </ul>
    </li>
  </tabset>
</ng-form>
