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

  <div ng-show="mbtiles.activeTab === 0">
    <div class="{{ widgetName }} inner_expgp">
      <form
        name="{{ widgetName }}"
        ng-submit="exportMBTILES(mbtiles);"
        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="{{ 'importExportMBTILES.getFromMap' | translate }}"
            >
              <i class="fa fa-arrow-circle-right"></i>
            </button>
            <button
              type="button"
              ng-click="initSelection()"
              class="btn btn-default btn-xs"
              title="{{ 'importExportMBTILES.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 mbtiles.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="mbtiles.srid"
                  bs-options="srid for srid in srids"
                  ng-change="changedSrid(mbtiles.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="!mbtiles.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="!mbtiles.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="!mbtiles.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="mbtiles.bbox.maxy"
                  placeholder="{{ 'exportGeopackage.bbox.maxy' | translate }}"
                  ng-disabled="!mbtiles.srid"
                  step="0.0000000001"
                  ng-required="mbtiles.bbox.maxy > mbtiles.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="mbtiles.bbox.minx"
                    ng-disabled="!mbtiles.srid"
                    step="0.0000000001"
                    placeholder="{{ 'exportGeopackage.bbox.minx' | translate }}"
                    ng-required="mbtiles.bbox.maxx > mbtiles.bbox.minx"
                  />
                </div>
                <div class="col-md-6">
                  <input
                    type="number"
                    style="width: 150px; text-align: center;"
                    class="form-control"
                    ng-model="mbtiles.bbox.maxx"
                    ng-disabled="!mbtiles.srid"
                    step="0.0000000001"
                    placeholder="{{ 'exportGeopackage.bbox.maxx' | translate }}"
                    ng-required="mbtiles.bbox.maxx > mbtiles.bbox.minx"
                  />
                </div>
              </div>

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

        <div class="row">
          <div class="col-xs-12">
            <div class="col-md-5" style="padding: 8px 0px 0px 0px;">
              <strong translate>importExportMBTILES.transparent</strong>
            </div>
            <div class="col-md-7" style="padding-top: 0px; padding-left: 0px;">
              <select
                ng-model="mbtiles.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>importExportMBTILES.zoominit</strong>
            </div>
            <div class="col-xs-3" style="padding: 0px 5px; width: 80px;">
              <select
                class="form-control"
                ng-model="mbtiles.zoominit"
                ng-options="zoom for zoom in zooms"
                placeholder="{{ 'importExportMBTILES.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="{{ 'importExportMBTILES.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>importExportMBTILES.zoom</strong>
            </div>
            <div class="col-xs-3" style="padding: 0px 5px; width: 80px;">
              <select
                class="form-control"
                ng-model="mbtiles.minzoom"
                ng-options="zoom for zoom in zooms"
                placeholder="{{ 'importExportMBTILES.maxzoom' | translate}}"
                ng-required="mbtiles.maxzoom !== undefined && mbtiles.maxzoom >= 0 &&
					mbtiles.maxzoom <= 20 &&  mbtiles.minzoom < mbtiles.maxzoom "
                required
              ></select>
            </div>
            <div class="col-xs-3" style="padding: 0px 5px; width: 80px;">
              <select
                class="form-control"
                ng-model="mbtiles.maxzoom"
                ng-options="zoom for zoom in zooms"
                placeholder="{{ 'importExportMBTILES.maxzoom' | translate}}"
                ng-required="mbtiles.minzoom !== undefined && mbtiles.minzoom >= 0 &&
					mbtiles.minzoom <= 20 && mbtiles.minzoom < mbtiles.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="{{ 'importExportMBTILES.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="mbtiles.runonbackground" />
                {{ 'importExportMBTILES.runonbackground' | translate }}
              </label>
            </div>
          </div>
        </div>

        <br />

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

        <br />

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

        <br />

        <div class="row">
          <div class="col-md-12">
            <div
              class="alert alert-danger"
              ng-show="mbtiles.filename && !validName(mbtiles.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>importExportMBTILES.name</strong>
            </div>
            <div class="col-md-4" style="padding-top: 0px; padding-left: 0px;">
              <input
                type="text"
                class="form-control"
                ng-model="mbtiles.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="mbtiles.ftis.length === 0 || !mbtiles.srid || !validName(mbtiles.filename)"
              >
                <i class="fa fa-download"></i>
              </button>
            </center>
          </div>
        </div>
      </form>
    </div>
  </div>

  <div ng-show="mbtiles.activeTab === 1">
    <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="3">
            <div class="row">
              <button class="btn btn-xs btn-default" ng-click="refreshList()">
                <i class="fa fa-refresh"></i>
              </button>
              <translate>importExportMBTILES.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.minZoom</translate>
          </th>
          <th colspan="2">
            <translate>process.process.maxZoom</translate>
          </th>
          <th colspan="2">
            <translate>process.process.creation</translate>
          </th>
          <th colspan="2">
            <translate>process.process.end</translate>
          </th>
        </tr>
        <tr
          style="text-align: center;"
          ng-repeat="rapport in $data"
          ng-class="{'active': rapport.$selected}"
        >
          <td colspan="3">
            <div class="btn-group">
              <button
                class="btn btn-xs btn-primary"
                ng-click="getQrCode(rapport)"
                ng-disabled="rapport.etat !== 'FINISHED'"
              >
                <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.taillembtiles }}</span>
          </td>
          <td colspan="2">
            <span>{{ rapport.minZoom }}</span>
          </td>
          <td colspan="2">
            <span>{{ rapport.maxZoom }}</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>
        </tr>
      </table>
    </div>
  </div>
</div>
