<form #form="ngForm">
  <div class="ui-g ui-fluid">
    <div class="ui-g-12 nopad">
      <p-toolbar>
        <div class="ui-toolbar-group-left">
          Messages
        </div>
        <div class="ui-toolbar-group-right actionBtn">
          <button pButton type="button" routerLink="/edit-message-template" label="Add Message Template"
                  icon="ui-icon-"></button>
        </div>
      </p-toolbar>
    </div>
  </div>
  <div class="ui-g form-group">
    <div class="ui-g-12">
      <div class="ui-g-offset-3 pull-right">
        <label>Sort By</label>
        <p-dropdown [options]="sortOptions" name="sort" [(ngModel)]="sortSelected" (onChange)="sortMessageTemplates()"
                    optionLabel="description">
        </p-dropdown>
      </div>
      <h1>My Templates</h1>
      <hr/>
      <div *ngFor="let message of myMessageTemplates" class="messageTemplate">
        <div class="messageRow">
          <div class="templateName">
            <span (click)="onRowSelect(message)">{{message.TemplateName}}</span>
          </div>
          <button pButton type="button" icon="ui-icon-edit" title="Edit"
                  (click)="onRowSelect(message)" [disabled]="showLoader">
          </button>
        </div>
      </div>
      <h1>Shared Templates</h1>
      <hr/>
      <div *ngFor="let message of sharedMessageTemplates" class="messageTemplate">
        <div class="messageRow">
          <div class="templateName">
            <span (click)="onRowSelect(message)">{{message.TemplateName}}</span>
          </div>
          <button pButton type="button" icon="ui-icon-edit" title="Edit"
                  (click)="onRowSelect(message)" [disabled]="showLoader">
          </button>
        </div>
      </div>
    </div>
  </div>
  <p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
</form>
