<h2 translate>{{ 'app.admin.pricing.list_of_the_subscription_plans' }}</h2>

<div ng-hide="modules.plans"
     class="alert alert-warning m-t"
     ng-bind-html="'app.admin.pricing.disabled_plans_info_html' | translate">
</div>

<div class="m-t-lg">
  <button type="button" class="btn btn-warning new-plan-button" ui-sref="app.admin.plans.new">
    <i class="fa fa-plus m-r"></i>
    <span translate>{{ 'app.admin.pricing.add_a_new_subscription_plan' }}</span>
  </button>
  <div class="form-group pull-right">
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-filter"></i></span>
      <select ng-model="planFiltering" class="form-control">
        <option ng-repeat="status in filterDisabled" value="{{status}}" translate>{{ 'app.admin.pricing.status_'+status }}</option>
      </select>
    </div>
  </div>
</div>

<table class="table">
  <thead>
  <tr>
    <th><a ng-click="setOrderPlans('name')">{{ 'app.admin.pricing.name' | translate }} <i class="fa fa-arrows-v" ng-class="{'fa fa-sort-alpha-asc': orderPlans=='name', 'fa fa-sort-alpha-desc': orderPlans=='-name', 'fa fa-arrows-v': orderPlans }"></i></a></th>
    <th><a ng-click="setOrderPlans('interval')">{{ 'app.admin.pricing.duration' | translate }} <i class="fa fa-arrows-v" ng-class="{'fa fa-sort-amount-asc': orderPlans=='interval', 'fa fa-sort-amount-desc': orderPlans=='-interval', 'fa fa-arrows-v': orderPlans }"></i></a></th>
    <th><a ng-click="setOrderPlans('group_id')">{{ 'app.admin.pricing.group' | translate }} <i class="fa fa-arrows-v" ng-class="{'fa fa-sort-alpha-asc': orderPlans=='group_id', 'fa fa-sort-alpha-desc': orderPlans=='-group_id', 'fa fa-arrows-v': orderPlans }"></i></a></th>
    <th><a ng-click="setOrderPlans('plan_category_id')">{{ 'app.admin.pricing.category' | translate }} <i class="fa fa-arrows-v" ng-class="{'fa fa-sort-alpha-asc': orderPlans=='plan_category_id', 'fa fa-sort-alpha-desc': orderPlans=='-plan_category_id', 'fa fa-arrows-v': orderPlans }"></i></a></th>
    <th class="hidden-xs"><a ng-click="setOrderPlans('app.admin.pricing.ui_weight')">{{ 'app.admin.pricing.prominence' | translate }} <i class="fa fa-arrows-v" ng-class="{'fa fa-sort-numeric-asc': orderPlans=='ui_weight', 'fa fa-sort-numeric-desc': orderPlans=='-ui_weight', 'fa fa-arrows-v': orderPlans }"></i></a></th>
    <th><a ng-click="setOrderPlans('amount')">{{ 'app.admin.pricing.price' | translate }} <i class="fa fa-arrows-v" ng-class="{'fa fa-sort-numeric-asc': orderPlans=='amount', 'fa fa-sort-numeric-desc': orderPlans=='-amount', 'fa fa-arrows-v': orderPlans }"></i></a></th>
    <th></th>
  </tr>
  </thead>
  <tbody>
  <tr ng-repeat="plan in plans | filterDisabled:planFiltering | orderBy:orderPlans"
      ng-class="{'disabled-line' : plan.disabled && planFiltering === 'all'}"
      ng-init="group = getGroupFromId(groups, plan.group_id)">
    <td>{{plan.base_name}}</td>
    <td>{{ plan.interval | planIntervalFilter:plan.interval_count }}</td>
    <td>{{group.name}}</td>
    <td>{{getPlanCategory(plan.plan_category_id)}}</td>
    <td class="hidden-xs">{{plan.ui_weight}}</td>
    <td>{{plan.amount | currency}}</td>
    <td><button type="button" class="btn btn-default" ui-sref="app.admin.plans.edit({id:plan.id})"><i class="fa fa-pencil-square-o"></i></button> <button type="button" class="btn btn-danger" ng-click="deletePlan(plans, plan.id)"><i class="fa fa-trash"></i></button></td>
  </tr>
  </tbody>
</table>