<script type="text/html" id="tmpl-modula-image">
	<div class="modula-single-image-content {{data.orientation}}" <# if ( data.full != '' ) { #> style="background-image:url('{{ data.thumbnail }}'); background-position: {{ data.valign }} {{ data.halign }};" <# } #> >
		<?php do_action( 'modula_admin_gallery_image_start' ); ?>
		<# if ( data.thumbnail != '' ) { #>
			<img src="{{ data.thumbnail }}">
		<# } #>
		<div class="actions">
			<?php do_action( 'modula_admin_gallery_image_before_actions' ); ?>
			<a href="#" class="modula-edit-image" title="<?php esc_attr_e( 'Edit Image', 'modula-best-grid-gallery' ); ?>"><span class="dashicons dashicons-edit"></span></a>
			<?php do_action( 'modula_admin_gallery_image_after_actions' ); ?>
			<a href="#" class="modula-delete-image" title="<?php esc_attr_e( 'Delete Image', 'modula-best-grid-gallery' ); ?>"><span class="dashicons dashicons-trash"></span></a>
		</div>
		<div class="segrip ui-resizable-handle ui-resizable-se"></div>
		<?php do_action( 'modula_admin_gallery_image_end' ); ?>
	</div>
</script>

<script type="text/html" id="tmpl-modula-image-editor">
	<div class="modula-ai-report">
		<button class="modula-ai-report-button button button-primary media-button button-large" id="modula-ai-report-generate-button" data-action="<# if ( data.report ) { #>refresh<# } else { #>generate<# } #>">
		<?php echo Modula_Helper::get_icon( 'ai' ); ?>
		<span class="modula-ai-btn-text">
		<# if ( data.report ) { #>
				<?php esc_html_e( 'Regenerate with Modula AI', 'modula-best-grid-gallery' ); ?>
			<# } else { #>
				<?php esc_html_e( 'Generate with Modula AI', 'modula-best-grid-gallery' ); ?>
			<# } #>
		</span>
		</button>
	</div>
	<div class="edit-media-header">
		<button class="left dashicons"><span class="screen-reader-text"><?php esc_html_e( 'Edit previous media item', 'modula-best-grid-gallery' ); ?></span></button>
		<button class="right dashicons"><span class="screen-reader-text"><?php esc_html_e( 'Edit next media item', 'modula-best-grid-gallery' ); ?></span></button>
	</div>
	<div class="media-frame-title">
		<h1><?php esc_html_e( 'Edit Metadata', 'modula-best-grid-gallery' ); ?></h1>
	</div>
	<div class="media-frame-content">
		<div class="attachment-details save-ready">
			<!-- Left -->
			<div class="attachment-media-view portrait">
				<div class="thumbnail thumbnail-image">
					<img class="details-image" src="{{ data.full }}" draggable="false" />
				</div>
			</div>
			
			<!-- Right -->
			<div class="attachment-info">
				<!-- Settings -->
				<div class="settings">
					<!-- Attachment ID -->
					<input type="hidden" name="id" value="{{ data.id }}" />
					
					<!-- Image Title -->
					<div class="setting">
						<label for="title" class="name"><?php esc_html_e( 'Title', 'modula-best-grid-gallery' ); ?></label>
						<input type="text" name="title" value="{{ data.title }}" />
						<div class="description">
							<?php esc_html_e( 'Image titles can take any type of HTML.', 'modula-best-grid-gallery' ); ?>
						</div>
					</div>
				  
					
					<!-- Alt Text -->
					<div class="setting">
						<label for="alt" class="name"><?php esc_html_e( 'Alt Text', 'modula-best-grid-gallery' ); ?></label>
						<input type="text" name="alt" value="{{ data.alt }}" />
						<div class="description">
							<?php esc_html_e( 'Very important for SEO, the Alt Text describes the image.', 'modula-best-grid-gallery' ); ?>
						</div>
					</div>

					<!-- Caption Text -->
					<div class="setting">
						<label for="description" class="name"><?php esc_html_e( 'Caption Text', 'modula-best-grid-gallery' ); ?></label>
						<textarea id="modula_gallery_description" name="description">{{ data.description }}</textarea>
					</div>

					<!-- Alignment -->
					<?php if ( apply_filters( 'modula_show_alignment_options', false ) ) : ?>
						<div class="setting">
							<label for="halign" class="name"><?php esc_html_e( 'Alignment', 'modula-best-grid-gallery' ); ?></label>
							<select name="halign" class="inline-input">
								<option <# if ( 'left' == data.halign ) { #> selected <# } #>><?php esc_html_e( 'left', 'modula-best-grid-gallery' ); ?></option>
								<option <# if ( 'center' == data.halign ) { #> selected <# } #>><?php esc_html_e( 'center', 'modula-best-grid-gallery' ); ?></option>
								<option <# if ( 'right' == data.halign ) { #> selected <# } #>><?php esc_html_e( 'right', 'modula-best-grid-gallery' ); ?></option>
							</select>
							<select name="valign" class="inline-input">
								<option <# if ( 'top' == data.valign ) { #> selected <# } #>><?php esc_html_e( 'top', 'modula-best-grid-gallery' ); ?></option>
								<option <# if ( 'middle' == data.valign ) { #> selected <# } #>><?php esc_html_e( 'middle', 'modula-best-grid-gallery' ); ?></option>
								<option <# if ( 'bottom' == data.valign ) { #> selected <# } #>><?php esc_html_e( 'bottom', 'modula-best-grid-gallery' ); ?></option>
							</select>
						</div>
					<?php endif; ?>

					<!-- Link -->
					<div class="setting modula-link">
						<div>
							<label for="link" class="name"><?php esc_html_e( 'URL', 'modula-best-grid-gallery' ); ?></label>
							<input type="text" name="link" value="{{ data.link }}" />
							<span class="dashicons dashicons-editor-break"></span>
							<span class="description">
								<?php esc_html_e( ' You can start typing the first 3 letter and we will autocomplete the rest !', 'modula-best-grid-gallery' ); ?>
								<?php esc_html_e( 'Enter a hyperlink if you wish to link this image to somewhere other than the general selected action.', 'modula-best-grid-gallery' ); ?>
								<?php esc_html_e( '( Doesn\'t work for Direct link to image or No link )', 'modula-best-grid-gallery' ); ?>
							</span>
						</div>
						<div>
							<span class="description">
								<input type="checkbox" name="target" value="1"<# if ( data.target == '1' ) { #> checked <# } #> />
								<span><?php esc_html_e( 'Opens your image links in a new browser window / tab.', 'modula-best-grid-gallery' ); ?></span>
							</span>
						</div>
					</div>

					<!-- Hide from lightbox -->
					<div class="setting modula-toggle-lightbox">
						<div class="modula-toggle">
							<div class="">
								<label for="togglelightbox" class="name"><?php esc_html_e( 'Hide image from lightbox', 'modula-best-grid-gallery' ); ?></label>
								<input class="modula-toggle__input" type="checkbox" name="togglelightbox" value="1"<# if ( data.togglelightbox == '1' ) { #> checked <# } #> />
								<div class="modula-toggle__items">
									<span class="modula-toggle__track"></span>
									<span class="modula-toggle__thumb"></span>
									<svg class="modula-toggle__off" width="6" height="6" aria-hidden="true"
											role="img"
											focusable="false"
											viewBox="0 0 6 6">
										<path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z"></path>
									</svg>
									<svg class="modula-toggle__on" width="2" height="6" aria-hidden="true"
											role="img"
											focusable="false"
											viewBox="0 0 2 6">
										<path d="M0 0h2v6H0z"></path>
									</svg>
								</div>
							</div>
						</div>
					</div>

					<!-- Hide from lightbox -->
					<div class="setting modula-toggle-lightbox">
						<div class="modula-toggle">
							<label for="hide_title" class="name"><?php esc_html_e( 'Hide Title', 'modula-best-grid-gallery' ); ?></label>
							<input class="modula-toggle__input" type="checkbox" name="hide_title" value="1"<# if ( data.hide_title == '1' ) { #> checked <# } #> />
							<div class="modula-toggle__items">
								<span class="modula-toggle__track"></span>
								<span class="modula-toggle__thumb"></span>
								<svg class="modula-toggle__off" width="6" height="6" aria-hidden="true"
										role="img"
										focusable="false"
										viewBox="0 0 6 6">
									<path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z"></path>
								</svg>
								<svg class="modula-toggle__on" width="2" height="6" aria-hidden="true"
										role="img"
										focusable="false"
										viewBox="0 0 2 6">
									<path d="M0 0h2v6H0z"></path>
								</svg>
							</div>
						</div>
					</div>

					<!-- Addons can populate the UI here -->
					<div class="modula-addons"></div>
				</div>
				<!-- /.settings -->     
			   
				<!-- Actions -->
				<div class="actions">
					<a href="#" class="modula-gallery-meta-submit button media-button button-large button-primary media-button-insert" title="<?php esc_attr_e( 'Save Metadata', 'modula-best-grid-gallery' ); ?>">
						<?php esc_html_e( 'Save', 'modula-best-grid-gallery' ); ?>
					</a>
					<a href="#" class="modula-gallery-meta-submit-close button media-button button-large media-button-insert" title="<?php esc_attr_e( 'Save & Close', 'modula-best-grid-gallery' ); ?>">
						<?php esc_html_e( 'Save & Close', 'modula-best-grid-gallery' ); ?>
					</a>

					<!-- Save Spinner -->
					<span class="settings-save-status">
						<span class="spinner"></span>
						<span class="saved"><?php esc_html_e( 'Saved.', 'modula-best-grid-gallery' ); ?></span>
					</span>
				</div>
				<!-- /.actions -->
			</div>
		</div>
	</div>
</script>
<script type="text/html" id="tmpl-modula-gallery-selector">
	<# if ( 'undefined' != typeof data.pos && data.pos != '' && 'top' == data.pos ) { #>
		<select id="modula_gallery_select_top" name="modula_gallery_select_top" style="display:none;">
			<# _.each(data.posts, function(post) { #>
				<option value="{{ post.id }}">{{ post.title }}</option>
			<# }); #>
		</select>
	<# }  #>
	<# if ( 'undefined' != typeof data.pos && data.pos != '' && 'bottom' == data.pos ) { #>
		<select id="modula_gallery_select_bottom" name="modula_gallery_select_bottom" style="display:none;">
			<# _.each(data.posts, function(post) { #>
				<option value="{{ post.id }}">{{ post.title }}</option>
			<# }); #>
		</select>
	<# }  #>
	<# if ( 'undefined' == typeof data.pos || data.pos == '' ) { #>
		<select id="modula_gallery_select" name="modula_gallery_select">
			<# _.each(data, function(post) { #>
				<option value="{{ post.id }}">{{ post.title }}</option>
			<# }); #>
		</select>
	<# }  #>
</script>
