{{> header }}

<h1>Bank holidays</h1>

<div class="row">
  <div class="col-md-6 lead">
    Public holidays for {{company.name}}`s account in {{yearCurrent}}
  </div>
  <div class="col-md-3 col-md-offset-3">
    <div class="btn-group pull-right">
      <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span aria-hidden="true" class="fa fa-plus"></span> Add new
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#" id="bankholiday-import-btn">Import default holidays for {{yearCurrent}}</a></li>
        <li><a href="#" id="add_new_department" data-toggle="modal" data-target="#add_new_bank_holiday_modal">Add new bank holiday</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="row">&nbsp;</div>

{{> show_flash_messages }}

<div class="row">
  <div class="col-xs-2">
    <a class="btn btn-default" href="?year={{yearPrev}}"><span aria-hidden="true" class="fa fa-chevron-left"></span> {{yearPrev}} </a>
  </div>
  <div class="col-xs-8 calendar-section-caption">
    <strong>January - December {{yearCurrent}}</strong>
  </div>
  <div class="col-xs-2">
    <a class="btn btn-default pull-right" href="?year={{yearNext}}">{{yearNext}} <span aria-hidden="true" class="fa fa-chevron-right"></span></a>
  </div>
</div>

<div class="row">&nbsp;</div>

<div class="row clearfix">
  <div class="col-md-8">
    <div class="row">
      {{# each calendar}}
      <div class="col-md-4 month_container">
          <table class="calendar_month month_{{ this.month }}">
          <thead>
            <tr>
              <td colspan="14">{{this.month}}</td>
            </tr>
            <tr>
              <td colspan="2">M</td>
              <td colspan="2">T</td>
              <td colspan="2">W</td>
              <td colspan="2">T</td>
              <td colspan="2">F</td>
              <td colspan="2">S</td>
              <td colspan="2">S</td>
            </tr>
          </thead>
          <tbody>
            {{#each this.weeks }}
            <tr>
              {{#each this}}
                {{> calendar_cell day = this}}
              {{/each}}
            </tr>
            {{/each}}
          </tbody>
        </table>
      </div>
      {{/each}}
    </div>
  </div>

  <div class="col-md-4">

    <div class="row">
      <div class="col-md-4"><label class="control-label">Date</label></div>
      <div class="col-md-6"><label class="control-label">Holiday Name</label></div>
    </div>

    <div class="row">&nbsp;</div>


    {{#unless bankHolidays.length }}
    <div class="row">
      <div class="col-md-12 tst-no-bank-holidays text-center">No Bank holiday records</div>
    </div>
    {{/unless}}

    <form id="delete_bankholiday_form" method="post" action="/settings/bankholidays/delete/">
      <input name="year" value="{{yearCurrent}}" type="hidden">
    </form>
    <form id="import_bankholiday_form" method="post" action="/settings/bankholidays/import/?year={{yearCurrent}}"></form>
    <form id="update_bankholiday_form" method="post" action="/settings/bankholidays/?year={{yearCurrent}}">
    {{#each bankHolidays}}
    <div class="row">
      <div class="col-md-4">
        <div class="input-append date">
        <input type="text" class="form-control" value="{{as_date date}}" name="date__{{id}}" tom-test-hook="date__{{@index}}" data-date-autoclose="1" data-provide="datepicker" data-date-format="{{#with ../logged_user.company}}{{this.get_default_date_format_for_date_picker}}{{/with}}" data-date-week-start="1">
        <span class="add-on"><i class="icon-th"></i></span>
        </div>
      </div>
      <div class="col-md-6">
        <input type="text" class="form-control" value="{{name}}" name="name__{{id}}" tom-test-hook="name__{{@index}}">
      </div>
      <div class="col-md-2">
        <button class="btn btn-default pull-right bankholiday-remove-btn" type="button" value="{{id}}" tom-test-hook="remove__{{@index}}"><span class="fa fa-remove"></span></button>
      </div>
    </div>

    <div class="row">&nbsp;</div>

    {{/each}}

    <div class="row">&nbsp;</div>

    <div class="row">
      <div class="col-md-12">
        <div class="pull-right">
          {{!-- <button id="bankholiday-import-btn" class="btn btn-default" type="button">Import default holidays</button> --}}
          <button class="btn btn-default" type="button" data-toggle="modal" data-target="#add_new_bank_holiday_modal" id="add_new_bank_holiday_btn">Add new</button>
          {{#if bankHolidays.length}}
            <button type="submit" class="btn btn-success single-click">Save changes</button>
          {{/if}}
        </div>
      </div>
    </div>
    </form>

  </div>
</div>


<div class="row">&nbsp;</div>

{{> add_new_bank_holiday_modal
  container_id='add_new_bank_holiday_modal'
  form_action='/settings/bankholidays/'
  startDateOfYearCurrent=startDateOfYearCurrent
  yearCurrent=yearCurrent
}}

{{> footer }}