<section class="heading b-b">
  <div class="row no-gutter">
    <div class="col-xs-2 col-sm-2 col-md-1">
      <section class="heading-btn">
        <a role="button" ng-click="backPrevLocation($event)"><i class="fas fa-long-arrow-alt-left "></i></a>
      </section>
    </div>
    <div class="col-md-8 b-l b-r-md">
      <section class="heading-title">
        <h1 translate>{{ 'app.admin.icalendar.icalendar_import' }}</h1>
      </section>
    </div>

    <div class="col-md-3">
      <section class="heading-actions wrapper">

      </section>
    </div>

  </div>
</section>

<section class="row no-gutter">

  <div class="col-sm-12 col-md-12 col-lg-9">
    <div class="alert alert-info m-lg" translate>
      {{ 'app.admin.icalendar.intro' }}
    </div>
    <div class="wrapper-lg">
      <table class="table" ng-show="calendars.length > 0">
        <thead>
        <tr>
          <th style="width: 35%;" translate>{{ 'app.admin.icalendar.name' }}</th>
          <th style="width: 35%;" translate>{{ 'app.admin.icalendar.url' }}</th>
          <th translate>{{ 'app.admin.icalendar.display' }}</th>
          <th style="width: 20%;"></th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="calendar in calendars">
          <td class="calendar-name">{{calendar.name}}</td>
          <td class="calendar-url"><a href="{{calendar.url}}" target="_blank">{{calendar.url}}</a></td>
          <td class="calendar-legend-group"><span class="calendar-legend-item" ng-style="calendarStyle(calendar)" translate> {{ calendar.text_hidden ? '' : 'app.admin.icalendar.example' }}</span>
          <td class="calendar-actions">
            <button class="btn btn-info" ng-click="sync(calendar)"><i class="fa fa-refresh"></i></button>
            <button class="btn btn-danger" ng-click="delete(calendar)"><i class="fa fa-trash"></i></button>
          </td>
        </tr>
        </tbody>
      </table>
      <form class="calendar-form" name="newImportForm">
        <h4 translate>{{ 'app.admin.icalendar.new_import' }}</h4>
        <div class="input-group">
          <div class="input-group-addon">
            <i class="fa fa-font"></i>
          </div>
          <input type="text" ng-model="newCalendar.name" class="form-control" placeholder="{{ 'app.admin.icalendar.name' | translate }}" required>
        </div>
        <div class="input-group">
          <div class="input-group-addon">
            <i class="fa fa-link"></i>
          </div>
          <input type="url" ng-model="newCalendar.url" class="form-control" placeholder="{{ 'app.admin.icalendar.url' | translate }}" required>
        </div>
        <div class="input-group">
          <div class="input-group-addon">
            <i class="fa fa-paint-brush"></i>
          </div>
          <input type="text" minicolors ng-model="newCalendar.color" class="form-control" placeholder="{{ 'app.admin.icalendar.color' | translate}}" required/>
        </div>
        <div class="input-group">
          <div class="input-group-addon">
            <i class="fa fa-paint-brush"></i>
          </div>
          <input type="text" minicolors ng-model="newCalendar.text_color" class="form-control" placeholder="{{ 'app.admin.icalendar.text_color' | translate}}" ng-required="!newCalendar.text_hidden"/>
        </div>
        <div class="input-group">
          <label for="hideText" class="control-label m-r" translate>{{ 'app.admin.icalendar.hide_text' }}</label>
          <input bs-switch
                 ng-model="newCalendar.text_hidden"
                 id="hideText"
                 type="checkbox"
                 class="form-control"
                 switch-on-text="{{ 'app.admin.icalendar.hidden' | translate }}"
                 switch-off-text="{{ 'app.admin.icalendar.shown' | translate }}"
                 switch-animate="true"/>
        </div>
        <div class="m-t text-right">
          <button role="button" class="btn btn-warning" ng-click="save()" ng-disabled="newImportForm.$invalid" translate>
            {{ 'app.shared.buttons.confirm' }}
          </button>
        </div>
      </form>
    </div>
  </div>
</section>