[%
  WRAPPER "staff/base.tt2";
  ctx.page_title = l("Age Circs to Lost"); 
  ctx.page_app = "egAdminCirc";
  ctx.page_ctrl = 'AgeToLostCtl';
%]

[% BLOCK APP_JS %]
<script src="[% ctx.media_prefix %]/js/ui/default/staff/admin/local/circ/age_to_lost.js"></script>
<link rel="stylesheet" href="[% ctx.base_path %]/staff/css/admin.css" />
[% END %]

<div class="container-fluid" style="text-align:center">
  <div class="alert alert-info alert-less-pad strong-text-2">
    [% l('Age Circulations to Lost') %]
  </div>
</div>

<span>
[% | l %]
Choose the user profile and circulation library for the overdue circulations
you wish to age to a Lost status.  Note the descendants of these values 
(sub-groups, sub-libraries) will also be affected.
[% END %]
</span>

<div id='age-to-lost-container'>
  <div xclass="form-inline">
    <div class="form-group row">
      <label class="col-md-2">[% l('User Profile') %]</label>
      <div class="btn-group col-md-2" uib-dropdown>
        <button type="button" class="btn btn-default" uib-dropdown-toggle>
          <span style="padding-right: 5px;">{{selected_profile.name()}}</span>
          <span class="caret"></span>
        </button>
        <ul uib-dropdown-menu>
          <li ng-repeat="grp in profiles">
            <a href
              style="padding-left: {{pgt_depth(grp) * 10 + 5}}px"
              ng-click="set_profile(grp)">{{grp.name()}}</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="form-group row">
      <label class="col-md-2">[% l('Circulation Library') %]</label>
      <div class="col-md-2"><eg-org-selector selected="context_org"></eg-org-selector></div>
    </div>
    <div class="form-group row">
      <label class="col-md-2">[% l('Are you sure?') %]</label>
      <div class="col-md-2"><input type="checkbox" ng-model="i_am_sure"/></div>
    </div>
  </div>
    <div class="form-group">
      <button class="btn btn-default" 
        ng-class="{disabled : !i_am_sure}" ng-click="age_to_lost()">
        [% l('Queue for Aging') %]</button>
    </div>
  </div>

  <div class="row" ng-show="in_progress">
    <div class="col-md-3"></div>
    <div class="progress progress-striped active col-md-6">
      <div class="progress-bar" role="progressbar" aria-valuenow="100" 
        aria-valuemin="0" aria-valuemax="100" style="width: 100%">
        <span class="sr-only">[% l('Processing...') %]</span>
      </div>
    </div>
  </div>

  <div class="row" ng-show="in_progress || all_done">
    <div class="col-md-3"></div>
    <div class="col-md-3">
      [% l('Chunks Processed: [_1]', '{{chunks_processed}}') %]</div>
    <div class="col-md-3">
      [% l('Events Created: [_1]', '{{events_created}}') %]</div>
    </div>
  </div>

  <div class="row" ng-show="all_done">
    <div class="col-md-3"></div>
    <div class="col-md-6">
     <div class="alert alert-success" role="alert">
      [% l('Processing Complete') %]</div>
    </div>
  </div>

</div>
   

[% END %]