<div>
  <div
    bs-active-pane="geopackage.activeTab"
    ng-model="geopackage.activeTab"
    bs-tabs
  >
    <div ng-repeat="tab in tabs" title="{{ tab.title }}" bs-pane></div>
  </div>

  <div ng-show="geopackage.activeTab === 0">
    <div class="{{ widgetName }} inner_expgp">
      <form
        name="{{ widgetName }}"
        ng-submit="exportGeopackage(geopackage);"
        class="form"
        role="form"
        style="width: 440px; margin: 0 auto;"
      >
        <br />

        <div class="row">
          <div
            class="col-md-2 btn-group"
            style="padding-right: 0px; padding-top: 45px;"
          >
            <button
              type="button"
              ng-click="getFeatureFromCatalogue()"
              class="btn btn-default btn-xs"
              title="{{ 'exportGeopackage.getFromMap' | translate }}"
            >
              <i class="fa fa-arrow-circle-right"></i>
            </button>
            <button
              type="button"
              ng-click="initSelection()"
              class="btn btn-default btn-xs"
              title="{{ 'exportGeopackage.removeSelection' | translate }}"
            >
              <i class="fa fa-remove"></i>
            </button>
          </div>
          <div
            class="col-md-3"
            style="padding-top: 45px; padding-left: 0px; padding-right: 0px;"
          >
            <strong translate>urlsharing.layers</strong>
          </div>
          <div
            class="col-md-8 form-control"
            style="
              height: 120px;
              width: 210px;
              overflow-x: hidden;
              overflow-y: auto;
              padding-left: 0px;
            "
          >
            <ul>
              <li
                class="checkbox col-md-12"
                ng-repeat="fti in geopackage.ftis | orderBy : 'alias'"
                style="
                  display: inline-block;
                  min-height: 20px;
                  max-height: 40px;
                  width: 220px;
                  padding: 0px;
                "
              >
                <input type="checkbox" ng-model="fti.selected" />
                <span>{{ fti.alias }}</span>
              </li>
            </ul>
          </div>
        </div>

        <br />

        <div style="border: 1px solid #ccc;">
          <div class="row" style="margin-top: 15px; padding-left: 10px;">
            <div class="col-xs-12">
              <div class="col-md-5" style="padding: 8px 0px 0px 0px;">
                <strong translate>select_srid.title</strong>
              </div>
              <div
                class="col-md-7"
                style="padding-top: 0px; padding-left: 0px;"
              >
                <input
                  type="text"
                  class="form-control"
                  ng-model="geopackage.srid"
                  bs-options="srid for srid in srids"
                  ng-change="changedSrid(geopackage.srid)"
                  placeholder="ex: EPSG:3857, EPSG:2154, EPSG:4326..."
                  limit="25"
                  required
                  bs-typeahead
                />
              </div>
            </div>
          </div>

          <br />

          <div class="row" style="padding-left: 10px;">
            <div class="col-md-12">
              <div class="col-md-6" style="padding: 8px 0px 0px 0px;">
                <strong translate>urlsharing.bbox</strong>
              </div>
              <div
                class="col-md-6"
                style="
                  float: left;
                  padding-top: 0px;
                  padding-right: 0px;
                  width: 162px;
                "
              >
                <div class="btn-group" style="float: right;">
                  <button
                    type="button"
                    class="btn btn-sm btn-default"
                    title="{{'exportGeopackage.getfrommap' | translate}}"
                    ng-disabled="!geopackage.srid"
                    ng-click="getMapExtent()"
                  >
                    <i class="fa fa-map"></i>
                  </button>
                  <button
                    type="button"
                    class="btn btn-sm"
                    title="{{'exportGeopackage.selectArea' | translate}}"
                    ng-class="{ 'btn-primary': dragBox.getActive() , 'btn-default' : !dragBox.getActive() }"
                    ng-disabled="!geopackage.srid"
                    ng-click="selectArea()"
                  >
                    <i class="fa fa-edit"></i>
                  </button>
                  <button
                    type="button"
                    class="btn btn-sm btn-default"
                    ng-click="selectionCourante()"
                    ng-disabled="!geopackage.srid"
                    title="{{'exportGeopackage.current_selection' | translate}}"
                  >
                    <i class="fa fa-laptop"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <br />
          <div class="row" style="margin-bottom: 15px; padding-left: 10px;">
            <div class="col-md-12">
              <center>
                <input
                  type="number"
                  style="width: 150px; text-align: center;"
                  class="form-control"
                  ng-model="geopackage.bbox.maxy"
                  placeholder="{{ 'exportGeopackage.bbox.maxy' | translate }}"
                  ng-disabled="!geopackage.srid"
                  step="0.0000000001"
                  ng-required="geopackage.bbox.maxy > geopackage.bbox.miny"
                />
              </center>
              <div class="col-md-12">
                <div class="col-md-6">
                  <input
                    type="number"
                    style="width: 150px; text-align: center;"
                    class="form-control"
                    ng-model="geopackage.bbox.minx"
                    ng-disabled="!geopackage.srid"
                    step="0.0000000001"
                    placeholder="{{ 'exportGeopackage.bbox.minx' | translate }}"
                    ng-required="geopackage.bbox.maxx > geopackage.bbox.minx"
                  />
                </div>
                <div class="col-md-6">
                  <input
                    type="number"
                    style="width: 150px; text-align: center;"
                    class="form-control"
                    ng-model="geopackage.bbox.maxx"
                    ng-disabled="!geopackage.srid"
                    step="0.0000000001"
                    placeholder="{{ 'exportGeopackage.bbox.maxx' | translate }}"
                    ng-required="geopackage.bbox.maxx > geopackage.bbox.minx"
                  />
                </div>
              </div>

              <center>
                <input
                  type="number"
                  style="width: 150px; text-align: center;"
                  class="form-control"
                  ng-disabled="!geopackage.srid"
                  step="0.0000000001"
                  ng-model="geopackage.bbox.miny"
                  placeholder="{{ 'exportGeopackage.bbox.miny' | translate}}"
                  ng-required="geopackage.bbox.maxy > geopackage.bbox.miny"
                />
              </center>
            </div>
          </div>

          <br />

          <div class="row" style="padding-left: 10px;">
            <div class="col-xs-12">
              <div class="checkbox">
                <label>
                  <input
                    type="checkbox"
                    ng-model="visibleonmap"
                    ng-change="changedVisibility()"
                  />
                  {{ 'exportGeopackage.visibleonmap' | translate }}
                </label>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-12">
            <div class="checkbox">
              <label>
                <input type="checkbox" ng-model="geopackage.runonbackground" />
                {{ 'exportGeopackage.runonbackground' | translate }}
              </label>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-12">
            <div class="checkbox">
              <label>
                <input type="checkbox" ng-model="geopackage.ismbtiles" />
                {{ 'exportGeopackage.creatembtiles' | translate }}
              </label>
            </div>
          </div>
        </div>
        <div ng-show="geopackage.ismbtiles" class="row">
          <div class="col-xs-12">
            <input
              type="radio"
              name="geopackage.both"
              ng-model="geopackage.createboth"
              ng-value="true"
            />
            <span translate>exportGeopackage.createboth</span>
            <br />
            <input
              type="radio"
              name="geopackage.both"
              ng-model="geopackage.createboth"
              ng-value="false"
              ng-click="refreshMbtilesList()"
            />
            <span translate>exportGeopackage.getmbtiles</span>
          </div>
        </div>

        <div ng-if="geopackage.createboth">
          <br />

          <div class="row">
            <div class="col-xs-12">
              <div class="col-md-5" style="padding: 8px 0px 0px 0px;">
                <strong translate>exportGeopackage.transparent</strong>
              </div>
              <div
                class="col-md-7"
                style="padding-top: 0px; padding-left: 0px;"
              >
                <select
                  ng-model="geopackage.transparent"
                  class="form-control btn btn-default"
                  ng-options="opt for opt in transparency"
                  required
                >
                </select>
              </div>
            </div>
          </div>

          <br />

          <div class="row">
            <div class="col-xs-12">
              <div class="col-md-8" style="padding: 8px 0 0 0px; width: 230px;">
                <strong translate>exportGeopackage.zoominit</strong>
              </div>
              <div class="col-xs-3" style="padding: 0px 5px; width: 80px;">
                <select
                  class="form-control"
                  ng-model="geopackage.zoominit"
                  ng-options="zoom for zoom in zooms"
                  placeholder="{{ 'exportGeopackage.zoominit' | translate}}"
                  required
                ></select>
              </div>
              <div class="col-md-1" style="padding-left: 0px; margin-top: 6px;">
                <button
                  type="button"
                  ng-click="getZoomFromMap('init')"
                  class="btn btn-default btn-xs"
                  title="{{ 'exportGeopackage.getZoomFromMap' | translate }}"
                >
                  <i class="fa fa-arrow-circle-left"></i>
                </button>
              </div>
            </div>
          </div>

          <br />

          <div class="row">
            <div class="col-xs-12">
              <div class="col-md-4" style="padding: 8px 0 0 0px; width: 150px;">
                <strong translate>exportGeopackage.zoom</strong>
              </div>
              <div class="col-xs-3" style="padding: 0px 5px; width: 80px;">
                <select
                  class="form-control"
                  ng-model="geopackage.minzoom"
                  ng-options="zoom for zoom in zooms"
                  placeholder="{{ 'exportGeopackage.maxzoom' | translate}}"
                  ng-required="geopackage.maxzoom !== undefined && geopackage.maxzoom >= 0 &&
						geopackage.maxzoom <= 20 &&  geopackage.minzoom < geopackage.maxzoom "
                  required
                ></select>
              </div>
              <div class="col-xs-3" style="padding: 0px 5px; width: 80px;">
                <select
                  class="form-control"
                  ng-model="geopackage.maxzoom"
                  ng-options="zoom for zoom in zooms"
                  placeholder="{{ 'exportGeopackage.maxzoom' | translate}}"
                  ng-required="geopackage.minzoom !== undefined && geopackage.minzoom >= 0 &&
						geopackage.minzoom <= 20 && geopackage.minzoom < geopackage.maxzoom "
                  required
                ></select>
              </div>
              <div class="col-md-1" style="padding-left: 0px; margin-top: 6px;">
                <button
                  type="button"
                  ng-click="getZoomFromMap()"
                  class="btn btn-default btn-xs"
                  title="{{ 'exportGeopackage.getZoomFromMap' | translate }}"
                >
                  <i class="fa fa-arrow-circle-left"></i>
                </button>
              </div>
            </div>
          </div>

          <br />

          <div class="row">
            <div class="col-xs-12">
              <div class="checkbox">
                <label>
                  <input type="checkbox" ng-model="geopackage.openstreetmap" />
                  {{ 'importExportMBTILES.openstreetmap' | translate }}
                </label>
              </div>
            </div>
          </div>
        </div>

        <div ng-if="!geopackage.createboth">
          <br />
          <div class="row">
            <div class="col-xs-12">
              <div class="col-md-5" style="padding: 8px 0px 0px 0px;">
                <strong translate>exportGeopackage.mbtilestoget</strong>
              </div>
              <div
                class="col-md-7"
                style="padding-top: 0px; padding-left: 0px;"
              >
                <select
                  ng-model="geopackage.mbtiles"
                  class="form-control btn btn-default"
                  ng-options="opt as createName(opt) for opt in mbtiles | orderBy:'file'"
                  required
                >
                </select>
              </div>
            </div>
          </div>
        </div>

        <br />

        <div class="row">
          <div class="col-md-12">
            <div
              class="alert alert-danger"
              ng-show="geopackage.filename && !validName(geopackage.filename)"
            >
              <span translate>importExportMBTILES.unacceptedcaracters</span>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-12">
            <div class="col-md-8" style="padding: 8px 0px 0px 0px;">
              <strong translate>exportGeopackage.name</strong>
            </div>
            <div class="col-md-4" style="padding-top: 0px; padding-left: 0px;">
              <input
                type="text"
                class="form-control"
                ng-model="geopackage.filename"
                limit="25"
                required
              />
            </div>
          </div>
        </div>

        <br />

        <div class="row">
          <div class="col-md-12">
            <center>
              <button
                type="submit"
                class="btn btn-sm btn-primary"
                title="{{'exportGeopackage.download' | translate}}"
                ng-disabled="geopackage.ftis.length === 0 || !geopackage.srid || !validName(geopackage.filename)"
              >
                <i class="fa fa-download"></i>
              </button>
            </center>
          </div>
        </div>
      </form>
    </div>
  </div>

  <div ng-show="geopackage.activeTab === 1">
    <div class="col-xs-12">
      <div class="checkbox">
        <label>
          <input
            type="checkbox"
            ng-model="geopackage.automaticrefresh"
            ng-change="changedRefresh()"
          />
          {{ 'exportGeopackage.automaticrefresh' | translate }}
        </label>
      </div>
    </div>

    <br />
    <div
      class="col-xs-12"
      style="max-height: 500px; overflow-y: auto; font-size: 10px;"
    >
      <table
        ng-table="tableParamsProcessus"
        class="table table-striped table-bordered"
      >
        <tr>
          <th colspan="4">
            <div class="row">
              <button class="btn btn-xs btn-default" ng-click="refreshList()">
                <i class="fa fa-refresh"></i>
              </button>
              <translate>exportGeopackage.actions</translate>
            </div>
          </th>
          <th colspan="2">
            <translate>process.process.file</translate>
          </th>
          <th colspan="2">
            <translate>process.process.etat</translate>
          </th>
          <th colspan="2">
            <translate>process.process.progress</translate>
          </th>
          <th colspan="2">
            <translate>process.process.taille</translate>
          </th>
          <th colspan="2">
            <translate>process.process.creation</translate>
          </th>
          <th colspan="2">
            <translate>process.process.end</translate>
          </th>
          <th colspan="1">
            <translate>process.geopackage.both</translate>
          </th>
        </tr>
        <tr
          style="text-align: center;"
          ng-repeat="rapport in $data"
          ng-class="{'active': rapport.$selected}"
        >
          <td colspan="4">
            <div class="btn-group">
              <button
                class="btn btn-xs btn-default"
                ng-click="getBilanSynchro(rapport)"
              >
                <i class="fa fa-info"></i>
              </button>
              <button
                class="btn btn-xs btn-danger"
                ng-click="blockSynchroAllGeopackage(rapport)"
                ng-disabled="rapport.imported != true || rapport.synchronised == true "
              >
                <i class="fa fa-lock"></i>
              </button>
              <button
                class="btn btn-xs btn-primary"
                ng-click="synchroAllGeopackage(rapport)"
                ng-disabled="rapport.imported != true || rapport.synchronised == true "
              >
                <i class="fa fa-refresh"></i>
              </button>
              <button
                class="btn btn-xs btn-primary"
                ng-click="getQrCode(rapport)"
                ng-disabled="rapport.etat !== 'FINISHED' ||
							rapport.exported == true "
              >
                <i class="fa fa-qrcode"></i>
              </button>
              <button
                class="btn btn-xs btn-primary"
                ng-click="getFile(rapport)"
                ng-disabled="rapport.etat !== 'FINISHED'"
              >
                <i class="fa fa-download"></i>
              </button>
              <button
                class="btn btn-xs btn-danger"
                ng-click="deleteProcess(rapport)"
                ng-disabled="rapport.etat == 'RUNNING'"
              >
                <i class="fa fa-remove"></i>
              </button>
            </div>
          </td>
          <td colspan="2">
            <span>{{ rapport.file }}</span>
          </td>
          <td colspan="2">
            <span translate>process.process.{{ rapport.etat }}</span>
          </td>
          <td colspan="2">
            <span>{{ rapport.progress }}</span>
          </td>
          <td colspan="2">
            <span>{{ rapport.taillegeopackage }}</span>
          </td>
          <td colspan="2">
            <span>{{ rapport.creation | date:'dd MMM yyyy HH:mm' }}</span>
          </td>
          <td colspan="2">
            <span>{{ rapport.end | date:'dd MMM yyyy HH:mm' }}</span>
          </td>
          <td colspan="1">
            <i
              class="fa"
              ng-class="{'fa-check-circle' : rapport.both , 'fa-circle-o' : (!rapport.both || rapport.isnotmbtiles) }"
            ></i>
          </td>
        </tr>
      </table>
    </div>
  </div>

  <div ng-show="geopackage.activeTab === 2">
    <div class="row" style="margin-top: 20px;">
      <div class="col-xs-12">
        <div class="col-md-5" style="padding: 8px 0px 0px 0px;">
          <strong translate>process.process.file</strong>
        </div>
        <div class="col-md-7" style="padding-top: 0px; padding-left: 0px;">
          <select
            class="form-control"
            ng-model="geopackage.selectedFile"
            required="required"
            ng-options="item as createName(item) for item in currentProcess | filter: {imported: true} | filter: {synchronised:'!true' }"
            ng-change="getTabledForFile(geopackage.selectedFile)"
          >
            <option value="" disabled selected hidden translate
              >{{ geopackage.selectedFile.file }}</option
            >
          </select>
        </div>
      </div>
    </div>

    <br />

    <div class="row">
      <div class="col-xs-12">
        <div class="col-md-5" style="padding: 8px 0px 0px 0px;">
          <strong translate>common.component</strong>
        </div>
        <div class="col-md-7" style="padding-top: 0px; padding-left: 0px;">
          <select
            ng-disabled="components.length == 0 || !geopackage.selectedFile"
            class="form-control"
            ng-model="geopackage.componentSelected"
          >
            <option ng-repeat="cmp in components" value="{{cmp}}"
              >{{cmp}}</option
            >
          </select>
        </div>
      </div>
    </div>

    <br />

    <div class="row">
      <div class="col-xs-12">
        <center>
          <div class="btn-group">
            <button
              class="btn btn-mini btn-default"
              ng-click="getBilanSynchro(geopackage.selectedFile)"
              ng-disabled="!geopackage.selectedFile"
            >
              <i class="fa fa-info"></i>
            </button>
            <button
              class="btn btn-mini btn-primary"
              ng-click="OpenDataTabale()"
              ng-disabled="!geopackage.componentSelected"
            >
              <i class="fa fa-th-list"></i>
            </button>
            <button
              class="btn btn-mini btn-primary"
              ng-click="synchroByComponent(geopackage)"
              ng-disabled="!geopackage.componentSelected || verifyCompSynchronised(geopackage) || geopackage.selectedFile.synchronised==true"
            >
              <i class="fa fa-refresh"></i>
            </button>
            <button
              class="btn btn-mini btn-danger"
              ng-click="blockSynchroByComponent(geopackage)"
              ng-disabled="!geopackage.componentSelected || verifyCompSynchronised(geopackage) || geopackage.selectedFile.synchronised==true"
            >
              <i class="fa fa-lock"></i>
            </button>
          </div>
        </center>
      </div>
    </div>

    <div
      class="col-xs-12"
      ng-if="lisComponent==true"
      ftid="componentFti.uid"
      where="whereClause"
      wheresynchr="whereModifs"
      relationshow="true"
      res="geopackage.features"
      map="map"
      attributes="componentFti.attributes"
      buttonactions="buttonactions"
      geojsondata="false"
      height="350"
      gcdata-datatable
    ></div>
  </div>
</div>
