<div class="panel-alert-list">
  <div class="panel-alert-list__no-alerts" ng-show="ctrl.noAlertsMessage">
    {{ctrl.noAlertsMessage}}
  </div>

  <section ng-if="ctrl.panel.show === 'current'">
    <ol class="alert-rule-list">
      <li class="alert-rule-item" ng-repeat="alert in ctrl.currentAlerts">
        <div class="alert-rule-item__icon  {{alert.stateModel.stateClass}}">
          <icon name="'{{alert.stateModel.iconClass}}'" size="'xl'" style="margin-right: 4px;"></icon>
        </div>
        <div class="alert-rule-item__body">
          <div class="alert-rule-item__header">
            <p class="alert-rule-item__name">
              <a href="{{alert.url}}?viewPanel={{alert.panelId}}">
                {{alert.name}}
              </a>
            </p>
            <div class="alert-rule-item__text">
              <span class="{{alert.stateModel.stateClass}}">{{alert.stateModel.text}}</span>
              <span class="alert-rule-item__time">for {{alert.newStateDateAgo}}</span>
            </div>
          </div>
        </div>
      </li>
    </ol>
  </section>

  <section ng-if="ctrl.panel.show === 'changes'">
    <ol class="alert-rule-list">
      <li class="alert-rule-item" ng-repeat="al in ctrl.alertHistory">
        <div class="alert-rule-item__icon {{al.stateModel.stateClass}}">
          <icon name="'{{al.stateModel.iconClass}}'" size="'xl'"></icon>
        </div>
        <div class="alert-rule-item__body">
          <div class="alert-rule-item__header">
            <p class="alert-rule-item__name">{{al.alertName}}</p>
            <div class="alert-rule-item__text">
              <span class="{{al.stateModel.stateClass}}">{{al.stateModel.text}}</span>
            </div>
          </div>
          <span class="alert-rule-item__info">{{al.info}}</span>
        </div>
        <div class="alert-rule-item__time">
          <span>{{al.time}}</span>
        </div>
      </li>
    </ol>
  </section>
</div>
