M2OLA/frontend/app/views/responsableFormationSpace.html

<div layout="column">
  <md-toolbar>

    <div class="md-toolbar-tools">
      <h2 md-truncate flex>Bienvenue Claire Veronneau</h2>

      <md-button ng-click="logout()">
        Se déconnecter
      </md-button>
    </div>

  </md-toolbar>
</div>
<div layout="row" style="padding: 1%;">
  <div flex="70">
    <div layout="column" ng-cloak>
      <md-content class="md-padding">
        <md-tabs style="height : 100vh" md-selected="selectedIndex" md-border-bottom md-autoselect>
          <md-button class="md-primary">+</md-button>
          <md-button class="md-primary" ng-click="removeTab( selectedIndex )" ng-disabled="tabs.length <= 1">-</md-button>
          
          <md-tab ng-repeat="tab in tabs" ng-disabled="tab.disabled" label="{{tab.title}}">
            
            <div class="demo-tab tab{{$index%4}}" style="padding: 25px; text-align: center;">
              
              <div  layout="column">
                <div flex class="principaux_formation">
                  <div layout="column">
                    <md-button class="md-raised md-primary" ng-click="addRecordPeriode(tab.id)">Créer une période</md-button>
                    
                    <div flex class="div_periodes" ng-repeat="periode in tab.periodes">
                      <md-button class="md-raised md-primary" ng-click="addRecordPlage(tab.id, periode.id)">Créer une plage de saisie</md-button>
                      
                      <div class="div_plages_de_saisies" ng-repeat="plage in periode.plages">
                        <form class="period_forms">
                          <div layout-gt-sm="row">
                            <div flex-gt-xs>
                              <md-select name="type" ng-model="periode.type" required placeholder='Type de la période'>
                                <md-option value="entreprise">Entreprise</md-option>
                                <md-option value="formation">Formation</md-option>
                              </md-select>
                            </div>
                            <div flex-gt-xs>
                              <md-datepicker ng-model="ctrl.myDateDeb" md-placeholder="Date de début"></md-datepicker>
                            </div>
                            <div flex-gt-xs>
                              <md-datepicker ng-model="ctrl.myDateFin" md-placeholder="Date de fin"></md-datepicker>
                            </div>
                          </div>
                        </form>
                      </div>
                      
                    </div>
                    
                  </div>
                </div>
                
                <md-content layout-padding>
                  
                <div flex class="principaux_formation" style="background-color: crimson">
                  
                    <form name="administrativesData_form" data-ng-submit="">
                      <h2>Données administratives communes</h2>
                      <md-input-container md-no-float class="md-block">
                        <input ng-model="composanteFormation" placeholder="Composante de la formation">
                      </md-input-container>
                      <md-input-container md-no-float class="md-block">
                        <input ng-model="reponsableFormation" placeholder="Responsable pédagogique de la formation">
                      </md-input-container>
                      <div>
                        <md-button type="submit">Submit</md-button>
                      </div>
                  </form>
                  
                  <form name="studentsList_form">
                    <h2>Liste des étudiants</h2>
                    
                    <md-list-item class="md-3-line" ng-repeat="item in tab.students" ng-click="null">
                      <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.nom}}" />
                      <div class="md-list-item-text" layout="column">
                        <h3>{{ item.nom_prenom }}</h3>
                        <p>Alternance à : </p>
                      </div>
                    </md-list-item>
                    
                    <div class="div_studentsList">
                      <md-input-container md-no-float class="md-block">
                        <input ng-model="infos_student" placeholder="Nom Prénom de l'étudiant">
                      </md-input-container>
                      <md-button class="md-raised md-primary" ng-click="addStudent(tab.id,infos_student)">Ajouter</md-button>
                    </div>
                    
                  </form>
                  
                  <form name="livret_form">
                    <h2>Pages du livret et ordonnancement</h2>
                    <md-list-item class="md-3-line" ng-repeat="item in tab.pagesLivret" >
                      <div class="md-list-item-text" layout="column">
                        <h3>{{ item.titre }}</h3>
                      </div>
                      <div class="md-list-item-text" layout="column">
                        <h3><a href="{{ item.lienApercu }}" >Aperçu de la page</a></h3>
                      </div>
                      <div class="md-list-item-text" layout="column">
                        <md-button class="md-raised md-primary">Mettre à jour</md-button>
                      </div>
                      <div class="md-list-item-text" layout="column">
                        <md-button class="md-raised md-warn">Supprimer</md-button>
                      </div>
                      <div class="md-list-item-text" layout="column">
                        <md-button class="md-secondary">Respond</md-button>
                      </div>
                    </md-list-item>  
                  </form>
                </div>
                </md-content>
              </div>
              
            </div>
            
          </md-tab>
        </md-tabs>
      </md-content>

  <!--  <form ng-submit="addTab(tTitle)" layout="column" class="md-padding" style="padding-top: 0;"> -->
    <!--  <div layout="row" layout-sm="column" style="height : 100vh"> -->
       <!-- <div flex style="position: relative;">
          <h2 class="md-subhead" style="position: absolute; bottom: 0; left: 0; margin: 0; font-weight: 500; text-transform: uppercase; line-height: 35px; white-space: nowrap;">Add a new Tab:</h2>
        </div> -->
      <!--  <md-input-container>
          <label for="label">Label</label>
          <input type="text" id="label" ng-model="tTitle">
        </md-input-container> -->
        <!--
        <md-input-container>
          <label for="content">Content</label>
          <input type="text" id="content" ng-model="tContent">
        </md-input-container>
        -->
     <!--   <md-button class="add-tab md-primary md-raised" ng-disabled="!tTitle" type="submit" style="margin-right: 0;">Add Tab</md-button>
      </div>
    </form> -->
  </div>
</div>

<div flex="30">
    <div layout="column" ng-cloak>
      <md-content class="md-padding">jj
      </md-content>
    </div>
</div>

</div>