<!--
Office UI Fabric JS 1.5.0
The JavaScript front-end framework for building experiences for Office 365.
-->
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->
<div class="ms-Persona
  {{~#if props.modifiers}}
    {{~#each props.modifiers}} ms-Persona--{{name}}{{/each~}}
  {{/if~}}">
  <div class="ms-Persona-imageArea">
    {{#if props.initials}}
      <div class="ms-Persona-initials ms-Persona-initials--{{props.initialsColor}}">{{props.initials}}</div>
    {{/if}}
    {{#if props.image}}
      <img class="ms-Persona-image" src="{{props.image}}">
    {{/if}}
  </div>
  <div class="ms-Persona-presence">
    {{#if props.icon}}
      <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--{{props.icon}}"></i>
    {{/if}}
  </div>
  <div class="ms-Persona-details">
    {{#if props.primaryText}}
      <div class="ms-Persona-primaryText">{{props.primaryText}}</div>
    {{/if}}
    {{#if props.secondaryText}}
      <div class="ms-Persona-secondaryText">{{props.secondaryText}}</div>
    {{/if}}
    {{#if props.tertiaryText}}
      <div class="ms-Persona-tertiaryText">{{props.tertiaryText}}</div>
    {{/if}}
    {{#if props.optionalText}}
      <div class="ms-Persona-optionalText">{{props.optionalText}}</div>
    {{/if}}
  </div>
  {{#if props.actionIcon}}
    <div class="ms-Persona-actionIcon">
      <i class="ms-Icon ms-Icon--{{props.actionIcon}}"></i>
    </div>
  {{/if}}
  {{#if props.personaCardProps}}
    {{> PersonaCard props=props.personaCardProps}}
  {{/if}}
</div>