<div class = "formulaire">

  <div
    class     = "section"
    ng-repeat = "section in formulaires.eligibilite.sections"
    ng-class  = "{'no-padding': !formulaires.eligibilite.sections[$index+1].visible}">
      <div
        class  = "section-name"
        ng-if  = "section.visible">
          {{section.name}}
      </div>

      <div ng-repeat = "line in section.lines">

      <div
        class        = "pres-text"
        ng-if        = "line.text"
        ng-bind-html = "$sce.trustAsHtml(line.text)">
      </div>

      <md-content
        layout    = "row"
        layout-sm = "column">

        <md-input-container
          class     = "{{ctrl.id}} {{ctrl.type}} {{($last && ctrl.type === 'checkbox')? 'no-padding' : ''}}"
          style     = "width: {{ctrl.width || '100%'}};"
          ng-repeat-start = "ctrl in line.ctrls">

          <label>

            {{ctrl.name}}
            <span
              ng-if = "ctrl.require"
              class = "form-required">

              *
            </span>

            <span
              ng-if = "ctrl.invalid && ctrl.type !== 'select'"
              class = "form-required">

              {{ctrl.msg}}
            </span>
            </label>
          </label>

          <!-- Type text-->
          <input
            ng-if     = "ctrl.type === 'text'"
            ng-model  = "result.eligibilite[ctrl.id]"
            ng-change = "ready ? isFormValid() : null">

          <!-- Type select-->
          <span
            ng-if = "ctrl.type === 'select' && ctrl.invalid"
            class = "form-required">

            {{ctrl.msg}}
          </span>

          <md-select
            ng-if     = "ctrl.type === 'select'"
            ng-change = "ready ? isFormValid() : null"
            ng-model  = "result.eligibilite[ctrl.id]">

            <md-option
              ng-repeat = "state in ctrl.options.categories"
              value     = "{{state.id}}">

              {{state.name}}
            </md-option>
          </md-select>

           <!-- Type radio -->
          <md-radio-group
            ng-if    = "ctrl.type === 'radio'"
            ng-model = "result.eligibilite[ctrl.id]">

            <md-radio-button
              ng-repeat = "state in ctrl.options.categories"
              value     = "{{state.id}}"
              class     = "md-primary">

              {{state.name}}
            </md-radio-button>

            <md-radio-button
              ng-if     = "ctrl.other"
              value     = "autre"
              class     = "md-primary">

              Autre:
            </md-radio-button>

            <div
              class = "note"
              ng-if = "ctrl.note">
                <br><br>
                {{ctrl.note}}
            </div>
          </md-radio-group>

          <!-- Type checkbox -->
          <md-checkbox
            ng-model   = "result.eligibilite[ctrl.id]"
            ng-change  = "ready ? isFormValid() : null"
            aria-label = "{{ctrl.name}}"
            ng-if      = "ctrl.type === 'checkbox'">

            {{ctrl.libelle}}
          </md-checkbox>

          <!-- Type textarea-->
          <textarea
            ng-if     = "ctrl.type === 'textarea'"
            ng-model  = "result.eligibilite[ctrl.id]"
            ng-change = "ready ? isFormValid() : null"
            columns   = "1">
          </textarea>

          <!-- Alerte -->
          <div
            class = "alerte"
            ng-if = "ctrl.options.alertes[result.eligibilite[ctrl.id]]">
            <i class = "fa fa-exclamation-circle"></i>
            {{ctrl.options.alertes[result.eligibilite[ctrl.id]]}}
          </div>
        </md-input-container>

        <div
          ng-repeat-end
          style = "position: absolute; left: 92px; top: {{ ctrl.id === 'ce_logement_est' ? '77px' : '101px'}};"
          ng-if = "ctrl.type === 'radio' && result.eligibilite[ctrl.id] === 'autre'">

          <input
            class       = "other-radio"
            placeholder = "Précisez ici..."
            ng-model    = "result.autres[ctrl.id]"
            ng-change   = "ready ? isFormValid() : null"/>
        </div>
      </md-content>
  </div>
</div>