<div class="col-xs-12 force-padding full-height">

  <div bs-active-pane="tabs.activeTab" ng-model="tabs.activeTab" ng-show="tabs.length > 1" bs-tabs>
      <div ng-repeat="tab in tabs track by $index" title="{{ tab.title | translate }}" bs-pane></div>
  </div>

  <div ng-show="tabs.activeTab === 0">

    <div class="row" ng-hide="!withDatatable">
      <div class="col-md-12 gcDatatableCrud marginTop">
          <div class="row">
              <div class="col-xs-12 nopadding">

                  <div class="btn btn-default btn-sm pull-right btn-circle" ng-click="showDescription = !showDescription">
                      <i class="fa" ng-class="{'fa-question' : !showDescription , 'fa-times' : showDescription}"></i>
                  </div>

                  <div class="btn btn-success btn-sm pull-right" ng-click="saveInfo(currentParameter)"
                          ng-disabled="checkInformations()">
                      <translate>hpo.multicritere.automatisation.create</translate>
                  </div>

                  <div class="btn btn-default btn-sm  pull-right marginLeft" ng-click="emptyParameter(true)"
                        ng-disabled="!currentParameter.fti">
                      <translate>hpo.multicritere.parameters.empty</translate>
                  </div>

                  <save-and-get-template-hpo config-name="configName"
                                          data="currentParameter"
                                          run-return="getReturnedTemplate"
                                          save-template-html="saveTemplateHtml"
                                          get-template-html="getTemplateHtml"
                                          exclude-properties="propertiestoexclude"
                                          disable-buttons="disableButtons"></save-and-get-template-hpo>
              </div>
          </div>
      </div>
    </div>

    <div class="col-md-12" ng-show="showDescription && withDatatable">
        <div class="col-md-6 col-md-offset-3">
            <div class="alert alert-info smallMarginBottom">
              <div class="row nopadding">
                <div class="col-md-11">
                  <center>
                    <translate>hpo.multicritere.automatisation.description</translate>
                  </center>
                </div>
                <div class="col-md-1">
                  <div class="btn btn-default btn-xs pull-right" ng-click="showDescription = false">
                      <i class="fa fa-times"></i>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>


    <div class="maintitlehpo row">
          <h2>
            <translate>common.configuration</translate>
          </h2>
    </div>

    <div class="col-md-12 nopadding marginTop">
      <div class="form-group clearfix">
          <div class="col-xs-6 col-xs-offset-3">
            <div class="alert alert-warning" ng-if=" currentParameter && currentParameter.categorie && existingNames &&
                                existingNames.indexOf(currentParameter.categorie) !== -1 ">
              <translate>hpo.multicritere.automatisation.nameExist</translate>
            </div>
          </div>

          <div class="col-xs-6 nopaddingLeft">
              <label class="required"><translate>hpo.multicritere.parameters.categorie</translate></label>

              <input type="text"
                 class="form-control"
                 ng-disabled="!withDatatable"
                 ng-model="currentParameter.categorie"
                 limit="25"/>
          </div>

          <div class="col-xs-6 nopaddingRight">
              <label><translate>hpo.common.commentaire</translate></label>
              <textarea type="textarea" class="form-control" id="inputalias"
                ng-disabled="!withDatatable"
                placeholder="{{ 'hpo.common.easyget' | translate }}"
                ng-model="currentParameter.commentaire"/>
          </div>
      </div>
    </div>

    <div class="col-md-12 nopadding marginTop">
        <div class="col-md-3 nopaddingLeft">
            <div class="panel panel-primary panel-hpo">
                <h4 class="adjust-positions text-left required" translate>hpo.common.component</h4>
                <div class="row marginTop" ng-if="ftis">
                    <div class="col-md-12">
                      <div class="col-md-12">
                        <div class="search">
                          <span class="fa fa-filter"></span>
                          <input type="text" ng-model="filtercomponents" class="form-control"
                              placeholder="{{ 'hpo.data.prepare.filter' | translate }}"
                          ng-keydown="filtercomponents = $event.keyCode === 27 ? '' : filtercomponents "/>
                          <a ng-show="filtercomponents.length > 0" ng-click="filtercomponents = ''">
                            <span class="fa fa-times-circle"></span>
                          </a>
                        </div>
                      </div>
                    </div>
                </div>

                <div class="row adjust-positions text-sized" css-manipulate='{"mh":"450px","ovy":"auto"}' ng-if="ftis">
                  <div class="col-md-12"  ng-hide="!fti || !filterFunc(filtercomponents,fti.alias)"
                      ng-repeat="fti in ftis | orderBy:'alias' ">
                      <input type="radio"
                              ng-model="currentParameter.fti"
                              ng-change="changedFti()"
                              ng-disabled="!withDatatable"
                              ng-value="fti" />
                      {{ fti.alias | translate }}
                  </div>
                </div>


                <div class="row adjust-positions" ng-if="!ftis || ftis.length == 0">
                  <div class="col-md-12">
                    <div class="alert alert-info">
                      <translate>hpo.common.noftis</translate>
                    </div>
                  </div>
                </div>

                <br />
            </div>
        </div>

        <div class="col-md-3" ng-if="currentParameter.fti">
            <div class="panel panel-primary panel-hpo">
                <h4 class="adjust-positions text-left required" translate>hpo.multicritere.automatisation.previsionuse</h4>

                <div class="row adjust-positions" css-manipulate='{"mh":"75px"}'>
                  <div class="col-md-12 nopadding">
                      <label class="text-left" translate>hpo.multicritere.automatisation.previsionorattribut</label>
                  </div>
                  <div class="col-md-12 bigMarginLeft nopadding" ng-hide="!ftiprevision || !ftiprevision.uid">
                      <input type="radio" ng-model="currentParameter.useprevision" value="prevision" ng-disabled="!withDatatable"
                      ng-change="changedPrevision(currentParameter.useprevision)"/>
                      <span translate>hpo.multicritere.automatisation.prevision</span>
                  </div>
                  <div class="col-md-12 bigMarginLeft nopadding">
                      <input type="radio" ng-model="currentParameter.useprevision" value="attribute" ng-disabled="!withDatatable" ng-change="changedPrevision(currentParameter.useprevision)"/>
                      <span translate>hpo.multicritere.automatisation.attribut</span>
                  </div>
                </div>

                <div class="row nomargin">
                  <div class="col-md-12">
                    <div class="row adjust-positions" css-manipulate='{"mh":"75px"}' ng-if="currentParameter.useprevision === 'prevision'">
                      <div class="col-md-12 nopadding">
                          <label class="text-left" translate>hpo.multicritere.automatisation.casseortaux</label>
                      </div>
                      <div class="col-md-12 bigMarginLeft nopadding">
                          <input type="radio" ng-model="currentParameter.usenombre" ng-disabled="!withDatatable" value="nombre"/>
                          <span translate>hpo.multicritere.automatisation.nombre</span>
                      </div>
                      <div class="col-md-12 bigMarginLeft nopadding">
                          <input type="radio" ng-model="currentParameter.usenombre" ng-disabled="!withDatatable" value="taux"/>
                          <span translate>hpo.multicritere.automatisation.taux</span>
                      </div>
                    </div>

                    <div class="row adjust-positions " css-manipulate='{"mh":"75px"}' ng-if="currentParameter.useprevision === 'prevision'">
                      <div class="col-md-12 nopadding">
                          <label class="text-left" translate>hpo.multicritere.automatisation.previsionmethod</label>
                      </div>
                      <div class="col-md-12 bigMarginLeft nopadding">
                          <input type="radio" ng-model="currentParameter.previsionmethod" ng-disabled="!withDatatable" value="rsf"/>
                          <span translate>hpo.common.rsf</span>
                      </div>
                      <div ng-if="!hpoSimplifyVisualize" class="col-md-12 bigMarginLeft nopadding">
                          <input type="radio" ng-model="currentParameter.previsionmethod" ng-disabled="!withDatatable" value="fitcox"/>
                          <span translate>hpo.common.fitcox</span>
                      </div>
                      <div ng-if="!hpoSimplifyVisualize" class="col-md-12 bigMarginLeft nopadding">
                          <input type="radio" ng-model="currentParameter.previsionmethod" ng-disabled="!withDatatable" value="fitcoxsurv"/>
                          <span translate>hpo.common.fitcoxsurv</span>
                      </div>
                    </div>

                    <div class="row marginTop">
                        <div class="col-md-12">
                          <div class="col-md-12">
                            <div class="search">
                              <span class="fa fa-filter"></span>
                              <input type="text" ng-model="filterPrevision" class="form-control"
                                  placeholder="{{ 'hpo.data.prepare.filter' | translate }}"
                                  ng-keydown="filterPrevision = $event.keyCode === 27 ? '' : filterPrevision "/>
                              <a ng-show="filterPrevision.length > 0" ng-click="filterPrevision = ''">
                                <span class="fa fa-times-circle"></span>
                              </a>
                            </div>
                          </div>
                        </div>
                    </div>

                    <div class="row adjust-positions text-sized"
                          css-manipulate='{"mh":"350px","ovy":"auto"}'
                          ng-if="currentParameter.useprevision === 'prevision'">
                      <div class="col-md-12" ng-show="!previsions || previsions.length == 0">
                        <div class="alert alert-info" ng-show="previsions.length === 0">
                          <translate>hpo.common.nodataprevision</translate>
                        </div>
                      </div>
                      <div class="col-md-12"  ng-hide="previsions.length == 0 || !prevision || !filterFunc(filterPrevision,prevision.properties.NOM)"
                          ng-repeat="prevision in previsions | orderBy:'alias' ">
                          <div class="input-group">
                            <span class="input-group-addon">
                              <input type="radio" ng-model="currentParameter.prevision"
                                ng-disabled="!withDatatable"
                                value="{{prevision.properties.IDENTIFIANT}}"/>
                            </span>
                            <input type="text" class="form-control"
                                    placeholder="" aria-label="" aria-describedby="basic-addon1"
                                    ng-model="prevision.properties.NOM" readonly>
                            <span class="input-group-addon btn btn-xs btn-info" ng-click="editPrevision(prevision)">
                              <i class="fa fa-info"></i>
                            </span>
                          </div>
                      </div>
                    </div>

                    <div class="row adjust-positions text-sized"
                          css-manipulate='{"mh":"350px","ovy":"auto"}'
                          ng-if="currentParameter.useprevision === 'attribute'">
                      <div class="col-md-12"  ng-hide="!attr || !filterFunc(filterPrevision,attr.alias)"
                          ng-repeat="attr in attributesAuthorised | orderBy:'alias'">
                          <input type="radio" ng-model="currentParameter.prevision" ng-disabled="!withDatatable" value="{{attr.name}}"/>
                          {{ attr.alias | translate}}
                      </div>
                    </div>
                  </div>
                </div>

                <br/>
            </div>
        </div>

        <div class="col-md-3" ng-if="currentParameter.fti && currentParameter.attributesSelection">
            <div class="panel panel-primary panel-hpo">
                <h4 class="adjust-positions text-left" translate>hpo.multicritere.automatisation.attributscorrespondance</h4>
                <div class="row marginTop">
                    <div class="col-md-12">
                      <div class="col-md-12">
                        <div class="search">
                          <span class="fa fa-filter"></span>
                          <input type="text" ng-model="filterattributsCorrespondance" class="form-control"
                              placeholder="{{ 'hpo.data.prepare.filter' | translate }}"
                              ng-keydown="filterattributsCorrespondance = $event.keyCode === 27 ? '' : filterattributsCorrespondance "/>
                          <a ng-show="filterattributsCorrespondance.length > 0" ng-click="filterattributsCorrespondance = ''">
                            <span class="fa fa-times-circle"></span>
                          </a>
                        </div>
                      </div>
                    </div>
                </div>

                <div class="row adjust-positions text-sized" css-manipulate='{"mh":"350px","ovy":"auto"}'>
                  <div class="col-md-12"  ng-hide="!attr || !filterFunc(filterattributsCorrespondance,attr.alias)"
                      ng-repeat="attr in currentParameter.attributesSelection | orderBy:'alias' ">
                      <div class="col-md-12 nopaddingLeft" ng-class="{'smallmargintop' : $index !== 0 }">
                        <div class="col-md-6 nopadding">
                          <label class="text-left" style="padding-top:5px;"
                                  ng-class="{ 'required' : keys.indexOf(attr.name) !== -1 }">{{ attr.alias | translate}}</label>
                        </div>
                        <div class="col-md-6 nopadding">
                          <select class="form-control" ng-model="attr.selection"
                                  ng-change="changedMateriau(attr)"
                                  ng-disabled="!withDatatable"
                                  ng-options="attr.name as attr.alias for attr in attributesAuthorised | orderBy:'alias'">
                              <option value="" disabled selected hidden translate>model.featuretypes.actions.choisir</option>
                          </select>
                        </div>
                      </div>
                  </div>
                </div>
                <br />
            </div>
        </div>

        <div class="col-md-3 nopaddingRight" ng-if="currentParameter.fti">
            <div class="panel panel-primary panel-hpo">
                <h4 class="adjust-positions text-left" translate>hpo.multicritere.automatisation.suppinfor</h4>

                <div class="row adjust-positions text-sized" css-manipulate='{"mh":"350px","ovy":"auto"}'>
                  <div class="col-md-12">
                    <div class="col-md-7 nopadding">
                      <label class="text-left" style="padding-top:5px;" translate>
                        hpo.multicritere.automatisation.attributes.amianteciment
                      </label>
                    </div>
                    <div class="col-md-5 nopadding">
                      <div class="alert-info" style="padding-top:5px;"  ng-show="attributeMateriaux.length === 0">
                        <translate>hpo.common.novalues</translate>
                      </div>
                      <select class="form-control" ng-model="currentParameter.amianteciment"
                              ng-show="attributeMateriaux.length > 0"
                              ng-disabled="!withDatatable"
                              ng-options="attr for attr in attributeMateriaux | orderBy:'alias'">
                          <option value="" disabled selected hidden translate>model.featuretypes.actions.choisir</option>
                      </select>
                    </div>
                  </div>
                </div>
                <br/>
            </div>
        </div>
    </div>

    <div class="maintitlehpo row">
          <h2 translate>hpo.common.result</h2>
    </div>

    <div class="col-md-12 nopadding marginBottom"
          ng-if="(currentParameter.geoj && currentParameter.geoj.features && currentParameter.geoj.features.length > 0) && end">
      <div fti="currentParameter.fti"
        attributes="attributestouseindatatable"
        buttonactions="buttonactions"
        reset-filter-on-toggle="true"
        display-total-number="true"
        table-fill-page="false"
        height="{{datatableHeightHistoric}}"
        crud="correctionAnalysisDatatableCrudHpo"
        where="false"
        geojsondata="currentParameter.geoj"
        hide-crud="false"
        date-format="'dd-MM-yyyy'"
        double-decimal-from-string-size="true"
        geoj="currentParameter.geoj"
        translate-attrs="attrstotranslate"
        usesweetalert="true"
        start-count="10"
        relationshow="true"
        hide-actions="true"
        hide-act-label="true"
        no-default-action="true"
        hide-actions="true"
        hide-all-edit-buttons="true"
        dont-use-guid="true"
        gcdata-datatable></div>
    </div>

    <div class="col-md-12" ng-if="!(currentParameter.geoj && currentParameter.geoj.features && currentParameter.geoj.features.length > 0)">
      <div class="alert alert-hpo-info">
          <translate>hpo.common.nodata</translate>
      </div>
    </div>

  </div>

  <div ng-show="tabs.activeTab === 1">
    <div class="col-md-12">
      <div class="correctPositionDataTAble"></div>
      <div id="hpoPrepareDataHistorique"
               fti="ftiAuto"
               attributes="ftiAutoattributes"
               height="{{datatableHeightHistoric}}"
               auto-adjust-height="false"
               table-fill-page="false"
               crud="datatableCalageCrudHpo"
               relationshow="true"
               date-format="'dd MMM yyyy HH:mm'"
               reset-filter-on-toggle="true"
               display-total-number="true"
               dont-show-filter="false"
               hide-crud="false"
               usesweetalert="true"
               translate-attrs="translateFtiAttributes"
               display-total-number="true"
               start-count="10"
               button-edit="buttonEditIcon"
               specialactions="buttonSpecialActions"
               where="whereFilter"
               hide-filter="hideFilter"
               supp-func-remove="postRemove"
               dont-use-guid="true"
               gcdata-datatable></div>
    </div>
  </div>

</div>
