<configcmd  open-config="openConfig()"></configcmd>

<div ng_show="ws.waitingConfig" >
	<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
	<span class="sr-only">Chargement de la configuration ...</span>
</div>

<div id="esri_print_main_container" ng_hide="ws.waitingConfig" ng-if="printparam">


	<!-- Modèle de carte -->
	<div class="row justify-content-start esri-print-input">

		<div class="col-xs-4">

			<label for="esri_print_params_template_select" translate>esriprint.template_label</label>

		</div>

		<div class="col-xs-8">
			<select class="btn btn-default" ng-if="printparam.template"
							ng-model="printparam.template"
							ng-change="drawTemplateRectangle()"
			>
				<option
						ng-repeat="printTemplate in printTemplates" value="{{printTemplate}}">
					{{printTemplate}}
				</option>
			</select>
		</div>

	</div>


	<!-- Onglets -->
	<div bs-active-pane="tabs.activeTab"  ng-model="tabs.activeTab"  bs-tabs >
		<div ng-repeat="tab in tabs.list"  title="{{tab.title}}"
			bs-pane style='background-color: azure;'>
		</div>
	</div>

	<!-- ONGLET 2 -->
	<div  ng-hide="tabs.activeTab != 1" style='background-color: azure;'>
		<div id="esri_print_params">

			<div ng-repeat="mapText in config.mapTexts"
			  class="row justify-content-start esri-print-input">
				<div class="col-xs-4">
					<label>
						{{mapText.alias}}
					</label>
				</div>
				<div class="col-xs-7">
					<input type="text" class="form-control"
						ng-model="printparam[mapText.name].text">
				</div>
				<div>
					<div class="action"
						ng-show="mapText.canChangeFont || mapText.canChangeFontSize">
						<span title="{{'layermanager.styles' | translate}}"
									data-template="js/XG/widgets/mapapp/esriprint/views/popovermaptext.html"
									data-placement="left" data-animation="am-flip-x"
									ng-click="closeCfgPopovers()"
									bs-popover >
								 <span class="fa fa-gears" ></span>
						</span>
						</div>
			</div>
			</div>
		</div>
	</div>

	<!-- ONGLET 1 -->
	<div  ng-hide="tabs.activeTab != 0" style='background-color: azure;'>
		<div id="esri_print_params">

			<!-- Largeur et Hauteur pour le cas MAP_ONLY -->
			<div class="row justify-content-start esri-print-input"
				ng-show='printparam.template=="MAP_ONLY"'>
				<div class="col-xs-4">
					<label for="esri_print_params_scale_input" translate>
						esriprint.map_only_width
					</label>
				</div>
				<div class="col-xs-8">
					<input type="number" class="form-control" min="1"
								 ng-model="printparam.map_only_width"
								 ng-change="drawTemplateRectangle()"
					>
				</div>
			</div>
			<!-- Hauteur pour le cas MAP_ONLY -->
			<div class="row justify-content-start esri-print-input"
					 ng-show="printparam.template=='MAP_ONLY'">
				<div class="col-xs-4">
					<label for="esri_print_params_scale_input" translate>
						esriprint.map_only_height
					</label>
				</div>
				<div class="col-xs-8">
					<input type="number" class="form-control" min="1"
								 ng-model="printparam.map_only_height"
								 ng-change="drawTemplateRectangle()"
					>
				</div>
			</div>

			<!-- Echelle -->
			<div class="row justify-content-start esri-print-input">
				<div class="col-xs-4">
					<label for="esri_print_params_scale_input" translate>
						esriprint.template_scale
					</label>
				</div>
				<div class="col-xs-8">
					<input type="number" class="form-control" ng-model="printparam.scale"
								 ng-change="changePreviewScale()"
								 id="esri_print_params_scale_input">
				</div>
			</div>

			<!-- Rotation -->
			<div class="row justify-content-start esri-print-input" ng-hide="config.options.hideRotation">
				<div class="col-xs-4">
					<label for="esri_print_params_rotation_input" translate>
						esriprint.template_rotation
					</label>
				</div>
				<div class="col-xs-8">
					<input type="number" class="form-control" ng-model="printparam.rotation"
								 ng-change="drawTemplateRectangle()"
								 id="esri_print_params_rotation_input">
				</div>
			</div>

			<!-- Dots Per Inch -->
			<div class="row justify-content-start esri-print-input">
				<div class="col-xs-4">
					<label for="esri_print_params_dpi_select" translate>
						esriprint.template_dpi
					</label>
				</div>

				<div class="col-xs-8">
					<select ng-model="printparam.dpi" class="btn btn-default">
						<option ng-repeat="printDpi in printDpis" value="{{printDpi}}">
							{{printDpi}}
						</option>
					</select>
				</div>
			</div>

			<!-- Format du fichier produit (PDF,JPEG) -->
			<div class="row justify-content-start esri-print-input">
				<div class="col-xs-4">
					<label for="esri_print_params_format_select" translate>
						esriprint.template_format
					</label>
				</div>
				<div class="col-xs-8">
					<select class="btn btn-default" ng-model="printparam.format">
						<option ng-repeat="printFormat in printFormats" value="{{printFormat}}">
							{{printFormat}}
						</option>
					</select>
				</div>
			</div>
		</div>
	</div>


	<div id="esri_print_valid_button" class="text-center">

		<button class="btn btn-mini btn-success" type="button"
			ng-click="submitPrint()" >
			<!-- <translate>esriprint.print_button</translate> -->
			<i class="fa fa-print" title="Imprimer"></i>
		</button>

		<button type="button" class="btn btn-mini btn-default"
						ng-click="centerTemplateRectangle()">
			<i class="fa fa-crosshairs" title="Cadrer"></i>
		</button>

		<button type="button" class="btn btn-mini btn-default"
						ng-click="clearTemplateRectangle()">
			<i class="fa fa-eraser" title="Effacer"></i>
		</button>

<!--        <button type="button" class="btn btn-mini"-->
<!--        		ng-class="{'btn-default': !moveExtentActive, 'btn-primary': moveExtentActive}"-->
<!--				ng-click="moveCustomizedExtent()">-->
<!--            <i class="fa fa-arrows" title="Déplacer"></i>-->
<!--        </button>-->

	</div>

</div>

