<div style="height:100%">
  <div class="row" ng-if="!xgos.portal.parameters.inElastic">
    <div class="col-xs-12">
      <div class="alert alert-warning">
        La recherche rapide n'est pas activée pour ce portail.
      </div>
    </div>
  </div>

  <div ng-if="xgos.portal.parameters.inElastic">
    <div
      class="row spbrow"
      ng-if="!dossierFTI.inElasticSearch || !controleFTI.inElasticSearch"
    >
      <div class="col-xs-12">
        <div class="btn btn-default" ng-click="indexcontroles()">
          Activer l'indexation des contenus pour cette application
        </div>
      </div>
    </div>

    <div ng-if="dossierFTI.inElasticSearch && controleFTI.inElasticSearch">
      <div class="row spbrow">
        <div class="col-xs-12">
          <div class="alert alert-info">
            <div>
              <button
                type="button"
                class="btn btn-success"
                title="Enregistrer la configuration"
                style="float:right;margin-top:-6px"
                ng-click="saveQueryDashboard()"
              >
                <i class="fa fa-save"></i> Enregistrer
              </button>

              <button
                style="float:right;margin:-6px 5px 0 0"
                type="button"
                class="btn btn-default"
                ng-click="addGraphicalDashbord()"
                title="Ajouter un graphe au tableau de bord (maximum 4)"
              >
                <i class="fa fa-plus"></i> Nouveau tableau
              </button>

              <button
                style="float:right;margin:-6px 5px"
                type="button"
                class="btn btn-default"
                ng-click="showGraphic()"
                title=" Graphes "
              >
                <i class="fa fa-area-chart"></i> Accéder aux tableaux
              </button>
            </div>
            <span>Permet de configurer les tableaux de bord avec : </span>
            <br />
            <br />
            <ol>
              <li>
                <span> Position du graphe </span>
              </li>
              <li>
                <span> Nom de la configuration </span>
              </li>
              <li>
                <span> Un enregistrement de requete rapide </span>
              </li>
              <li>
                <span>
                  <i class="fa fa-search"></i> Créer ou modifier une requete /
                  <i class="fa fa-list"></i> Vérifier le résultat /
                  <i class="fa fa-edit"></i> configurer le type de graphe
                </span>
              </li>
            </ol>
          </div>
        </div>
      </div>

      <div class="row" style="min-height:600px;height:100%;overflow-y:auto;">
        <div class="col-md-12">
          <div class="list-group" ng-repeat="dashboard in dashboards">
            <div class="col-md-12 searchdashboard">
              <div class="col-md-2" style="margin: -10px;">
                <span class="fa-stack fa-2x">
                  <i class="fa fa-desktop fa-stack-1x"></i>
                  <span
                    class="fa-stack-1x fa-stack-text"
                    style="font-size:10px;margin-top:-5px;"
                    >{{ dashboard.position }}</span
                  >
                </span>
                <button
                  type="button"
                  class="btn btn-default"
                  title="haut"
                  ng-click="dashboardMove($index , 'up')"
                  ng-disabled="$index === 0"
                >
                  <span class="glyphicon glyphicon-chevron-up"> </span>
                </button>
                <button
                  type="button"
                  class="btn btn-default"
                  title="bas"
                  ng-click="dashboardMove($index , 'down')"
                  ng-disabled="$index === dashboards.length-1"
                >
                  <span class="glyphicon glyphicon-chevron-down"> </span>
                </button>
              </div>
              <div class="col-md-4">
                <input
                  type="text"
                  class="form-control"
                  ng-model="dashboard.name"
                />
              </div>

              <div class="col-md-4">
                <select
                  ng-model="dashboard.query"
                  ng-change="changedQuerySelect($index)"
                  ng-options="query for query in saved.queries | orderBy : 'toString()'"
                  ng-disabled="!saved || saved.queries.length === 0"
                  class="form-control"
                  required
                >
                  <option value="" disabled selected hidden
                    >choisissez une recherche enregistrée</option
                  >
                </select>
              </div>

              <div style="float:right;padding:0;">
                <button
                  type="button"
                  class="btn btn-default"
                  title="Réduire"
                  style="margin-right:0;"
                  ng-click="reduceQueryDashboard($index , 'reduce')"
                >
                  <i class="fa fa-minus"></i>
                </button>

                <button
                  type="button"
                  class="btn btn-default"
                  title="Rafraîchir la requête associée"
                  style="margin-right:0;"
                  ng-click="refreshQueryDashboard($index, 'query')"
                >
                  <i class="fa fa-refresh"></i>
                </button>

                <button
                  type="button"
                  class="btn"
                  title="Modifier la requête associée"
                  style="margin-right:0;"
                  ng-class="{'btn-primary' : dashBoardType === 'query' && dashBoardIndex === $index ,
						   'btn-default' :  dashBoardType !== 'query' || dashBoardIndex !== $index }"
                  ng-click="editQueryDashboard($index, 'query')"
                >
                  <i class="fa fa-search"></i>
                </button>

                <button
                  type="button"
                  class="btn"
                  ng-disabled="!dashboard.resultsearch"
                  ng-class="{'btn-primary' : dashBoardType === 'datatable' && dashBoardIndex === $index ,
						   'btn-default' :  dashBoardType !== 'datatable' || dashBoardIndex !== $index }"
                  ng-click="visibleSearchResult($index , 'datatable' )"
                  title="Résultat"
                >
                  <i class="fa fa-list"></i>
                </button>

                <button
                  type="button"
                  class="btn"
                  title="Modifier le graphe associé"
                  style="margin-right:0;"
                  ng-class="{'btn-primary' : dashBoardType === 'chart' && dashBoardIndex === $index ,
						   'btn-default' :  dashBoardType !== 'chart' || dashBoardIndex !== $index }"
                  ng-click="editChartDashboard($index , 'chart')"
                >
                  <i class="fa fa-edit"></i>
                </button>

                <button
                  type="button"
                  class="btn btn-danger"
                  title="Supprimer cette configuration"
                  style="margin-right:0;"
                  ng-click="removeChartDashboard($index)"
                >
                  <i class="fa fa-remove"></i>
                </button>
              </div>
            </div>

            <div
              class="col-md-12 searchdashboard"
              ng-show="dashboard.configdashboardsearch || dashboard.configdashboardgraphic"
            >
              <div ng-show="dashboard.configdashboardsearch">
                <div ng-show="dashboard.showSearch">
                  <div
                    map="map"
                    res="dashboard.resultsearch"
                    elastic-filter
                    place="'dashboard'"
                    ftid="dashboard.ftid"
                    fti="dashboard.fti"
                    relations="dashboard.relations"
                    attributes="dashboard.attributes"
                    searchquery="dashboard.searchquery"
                    index="$index"
                    querydashboard="dashboard.query"
                    relationdashbord="dashboard.parsedElementsForRelationDashbord"
                    addspecial="true"
                  ></div>
                </div>

                <div ng-if="!dashboard.showSearch">
                  <div
                    map="map"
                    ftid="dashboard.ftid"
                    geojsondata="dashboard.resultsearch"
                    geoj="dashboard.resultsearch"
                    attributes="dashboard.fti.attributes"
                    res="dashboard.result"
                    height="{{datatableHeight}}"
                    table-fill-page="true"
                    export-csv="recherche_anc.csv"
                    date-format="'dd-MM-yyyy'"
                    reset-filter-on-toggle="true"
                    display-total-number="true"
                    gcdata-datatable
                  ></div>
                </div>
              </div>

              <div ng-if="dashboard.configdashboardgraphic">
                <div class="row">
                  <div class="col-md-12">
                    <div class="col-md-12 searchdashboard">
                      <div
                        chart-viewer
                        fti="dashboard.fti"
                        features="dashboard.resultsearch"
                        selected="true"
                        options="dashboard.chartoptions"
                        data="dashboard.chartdata"
                        config="dashboard.chartconfig"
                        attrchoice="dashboard.attrchoice"
                        ctrltype="'configDashboard'"
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
