<?xml version='1.0' standalone='yes'?>
<container
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:var="http://www.skyrix.com/od/binding"
    xmlns:const="http://www.skyrix.com/od/constant"
    xmlns:label="OGo:label"
    >
  <!-- daily -->
  <div layout="row" layout-align="start center"
       ng-show="editor.component.repeat.frequency == 'daily'">
    <var:string label:value="Every"/>
    <md-input-container class="md-input-number">
      <input type="number" min="1" label:aria-label="Every" ng-model="editor.component.repeat.interval"/>
    </md-input-container>
    <var:string label:value="Days"/>
  </div>

  <!-- weekly -->
  <div ng-show="editor.component.repeat.frequency == 'weekly'">
    <div layout="row" layout-align="start center">
      <var:string label:value="Every"/>
      <md-input-container class="md-input-number">
        <input type="number" min="1" label:aria-label="Every" ng-model="editor.component.repeat.interval"/>
      </md-input-container>
      <var:string label:value="Week(s)"/>
    </div>
    <div class="pseudo-input-container layout-padding" layout="row" layout-align="center center">
      <label class="pseudo-input-label"><var:string label:value="On"/></label>
      <md-grid-list md-cols="7" md-row-height="2em" md-gutter="0.5em"
                    flex="50" flex-sm="80" flex-xs="100"
                    ng-model="editor.component.repeat.days"
                    sg-toggle-grid="sg-toggle-grid"
                    sg-toggle-grid-attr="day">
        <var:foreach list="shortWeekDaysList" item="item">
          <md-grid-tile var:value="valueForWeekDay"><var:string value="labelForWeekDay"/></md-grid-tile>
        </var:foreach>
      </md-grid-list>
    </div>
  </div>

  <!-- monthly -->
  <div ng-show="editor.component.repeat.frequency == 'monthly'">
    <div layout="row" layout-align="start center">
      <var:string label:value="Every"/>
      <md-input-container class="md-input-number">
        <input type="number" min="1" label:aria-label="Every" ng-model="editor.component.repeat.interval"/>
      </md-input-container>
      <var:string label:value="Month(s)"/>
    </div>
    <md-radio-group ng-model="editor.component.repeat.month.type">
      <md-radio-button value="bymonthday">
        <var:string label:value="Recur on day(s)"/>
      </md-radio-button>
      <div layout="row" layout-align="start center">
        <md-grid-list md-cols="7" md-row-height="2em" md-gutter="0.5em"
                      flex="50" flex-sm="80" flex-xs="100"
                      ng-model="editor.component.repeat.monthdays"
                      ng-required="editor.recurrenceMonthDaysAreRequired()"
                      sg-toggle-grid="sg-toggle-grid">
          <md-grid-tile value="1">1</md-grid-tile>
          <md-grid-tile value="2">2</md-grid-tile>
          <md-grid-tile value="3">3</md-grid-tile>
          <md-grid-tile value="4">4</md-grid-tile>
          <md-grid-tile value="5">5</md-grid-tile>
          <md-grid-tile value="6">6</md-grid-tile>
          <md-grid-tile value="7">7</md-grid-tile>
          <md-grid-tile value="8">8</md-grid-tile>
          <md-grid-tile value="9">9</md-grid-tile>
          <md-grid-tile value="10">10</md-grid-tile>
          <md-grid-tile value="11">11</md-grid-tile>
          <md-grid-tile value="12">12</md-grid-tile>
          <md-grid-tile value="13">13</md-grid-tile>
          <md-grid-tile value="14">14</md-grid-tile>
          <md-grid-tile value="15">15</md-grid-tile>
          <md-grid-tile value="16">16</md-grid-tile>
          <md-grid-tile value="17">17</md-grid-tile>
          <md-grid-tile value="18">18</md-grid-tile>
          <md-grid-tile value="19">19</md-grid-tile>
          <md-grid-tile value="20">20</md-grid-tile>
          <md-grid-tile value="21">21</md-grid-tile>
          <md-grid-tile value="22">22</md-grid-tile>
          <md-grid-tile value="23">23</md-grid-tile>
          <md-grid-tile value="24">24</md-grid-tile>
          <md-grid-tile value="25">25</md-grid-tile>
          <md-grid-tile value="26">26</md-grid-tile>
          <md-grid-tile value="27">27</md-grid-tile>
          <md-grid-tile value="28">28</md-grid-tile>
          <md-grid-tile value="29">29</md-grid-tile>
          <md-grid-tile value="30">30</md-grid-tile>
          <md-grid-tile value="31">31</md-grid-tile>
        </md-grid-list>
      </div>
      <div layout="row" layout-align="start center">
        <md-radio-button value="byday">
          <var:string label:value="The"/>
        </md-radio-button>
        <md-select ng-model="editor.component.repeat.month.occurrence">
          <var:foreach list="monthlyRepeatList" item="item">
            <md-option var:value="valueForMonthlyRepeat"><var:string value="itemText"/></md-option>
          </var:foreach>
        </md-select>
        <md-select ng-model="editor.component.repeat.month.day">
          <var:foreach list="monthlyDayList" item="item">
            <md-option var:value="valueForMonthlyDay"><var:string value="item"/></md-option>
          </var:foreach>
        </md-select>
      </div>
    </md-radio-group>
  </div>

  <!-- yearly -->
  <div ng-show="editor.component.repeat.frequency == 'yearly'">
    <div layout="row" layout-align="start center">
      <var:string label:value="Every"/>
      <md-input-container class="md-input-number">
        <input type="number" min="1" label:aria-label="Every" ng-model="editor.component.repeat.interval"/>
      </md-input-container>
      <var:string label:value="Year(s)"/>
    </div>
    <div layout="row" layout-align="start center">
      <md-grid-list md-cols="6" md-row-height="2em" md-gutter="0.5em"
                    flex="50" flex-sm="80" flex-xs="100"
                    ng-model="editor.component.repeat.months"
                    sg-toggle-grid="sg-toggle-grid">
        <var:foreach list="yearlyMonthList" item="item">
          <md-grid-tile var:value="valueForYearlyMonth"><var:string value="item"/></md-grid-tile>
        </var:foreach>
      </md-grid-list>
    </div>
    <div layout="row" layout-align="start center">
      <md-checkbox class="sg-checkbox--with-select" ng-model="editor.component.repeat.year.byday">
        <var:string label:value="The"/>
      </md-checkbox>
      <md-select ng-model="editor.component.repeat.month.occurrence">
        <var:foreach list="monthlyRepeatList" item="item">
          <md-option var:value="valueForMonthlyRepeat"><var:string value="itemText"/></md-option>
        </var:foreach>
      </md-select>
      <md-select ng-model="editor.component.repeat.month.day">
        <var:foreach list="yearlyDayList" item="item">
          <md-option var:value="valueForYearlyDay"><var:string value="item"/></md-option>
        </var:foreach>
      </md-select>
    </div>
  </div>

  <!-- custom (rdates) -->
  <div ng-if="editor.component.repeat.frequency == 'custom'">
    <label class="button-label"><var:string label:value="On"/></label>
    <div layout="row" layout-align="start end" ng-repeat="rdate in editor.component.repeat.dates">
      <md-button class="md-icon-button" type="button" ng-click="editor.component.$deleteRecurrenceDate($index)">
        <md-icon>remove_circle</md-icon>
      </md-button>
      <md-datepicker
          ng-model="editor.component.repeat.dates[$index]"
          label:md-placeholder="On"><!-- date picker --></md-datepicker>
      <sg-timepicker
          ng-model="editor.component.repeat.dates[$index]"
          ng-hide="editor.component.isAllDay"><!-- time picker --></sg-timepicker>
    </div>
    <div layout="row" layout-align="start center">
      <md-button class="md-icon-button" type="button" ng-click="editor.component.$addRecurrenceDate()">
        <md-icon>add_circle</md-icon>
      </md-button>
      <label class="button-label">
        <var:string label:value="Add Recurrence Date"/>
      </label>
    </div>
  </div>
</container>
