<span page-title ng-model="host">{{ 'Subscriptions for: ' | translate }} {{ host.name }}</span>

<div ng-hide="host.hasSubscription()">
  <div data-extend-template="common/views/registration.html"></div>
</div>

<div ng-if="host.hasSubscription()">
  <section class="row">
    <div class="col-sm-6">
      <h4 translate>Subscription Details</h4>

      <dl class="dl-horizontal dl-horizontal-left">
        <dt translate>Status</dt>
        <dd>
          <i ng-class="getHostStatusIcon(host.subscription_global_status)"></i>
          {{ host.subscription_status_label | translate }}
        </dd>

        <dt ng-show="host.subscription_facet_attributes.compliance_reasons.length > 0" translate>Details</dt>
        <dd ng-show="host.subscription_facet_attributes.compliance_reasons.length > 0">
          <ul class="compliance-reasons">
            <li ng-repeat="reason in host.subscription_facet_attributes.compliance_reasons">{{ reason }}</li>
          </ul>
        </dd>

        <dt translate>Auto-Attach</dt>
        <dd>
          <span ng-if="simpleContentAccessEnabled" translate>
            Not Applicable
          </span>
          <div ng-if="!simpleContentAccessEnabled">
            <div bst-edit-select="host.subscription_facet_attributes.autoheal"
               options="autoHealOptions()"
               selector="host.subscription_facet_attributes.autoheal"
               formatter="booleanToYesNo"
               readonly="denied('edit_hosts', host)"
               on-save="saveSubscriptionFacet(host)">
            </div>
            <a ng-hide="denied('edit_hosts', host)"
               ng-click="autoAttachSubscriptions()"
               class="btn btn-default"
               ng-disabled="subscription.workingMode">
              <span translate>Run Auto-Attach</span>
            </a>

            <span ng-show="subscription.workingMode">
              <i class="fa fa-spinner inline-icon fa-spin"></i>
              <span translate>Working</span>
            </span>
          </div>
        </dd>

        <dt translate>Service Level</dt>
        <dd bst-edit-select="host.subscription_facet_attributes.service_level"
            readonly="denied('edit_hosts', host)"
            selector="host.subscription_facet_attributes.service_level"
            options="serviceLevels()"
            options-format="option for option in options"
            on-save="saveSubscriptionFacet(host)">
        </dd>
      </dl>
    </div>
  </section>

  <nav>
    <ul class="nav nav-tabs nav-tabs-pf" ng-show="permitted('attach_subscriptions')">
      <li ng-class="{active: isState('content-host.subscriptions.list')}">
        <a ui-sref="content-host.subscriptions.list">
          <!-- TODO: other pages too - label "List" vs. "List/Remove" based on edit permissions -->
          <span translate>
            List/Remove
          </span>
        </a>
      </li>

      <li ng-class="{active: stateIncludes('content-host.subscriptions.add')}">
        <a ui-sref="content-host.subscriptions.add">
          <span translate>
            Add
          </span>
        </a>
      </li>
    </ul>
  </nav>

  <div ui-view></div>

</div>