<div class="row" ng-controller="ProductController" ng-init="config.main_image = <?php echo(($page->field('main_image') ? $page->field('main_image') : 1)); ?>">
	<input type="hidden" name="field_main_image" ng-value="config.main_image" />

	<div class="<?php echo(TWO_COL); ?>">
		<fieldset class="padded">
			<legend>General</legend>

			<div class="<?php echo(FORM_ROW); ?>">
				<div class="<?php echo(LABEL_COL); ?>"><label for="field_price">Price <sup class="required">*</sup></label></div>
				<div class="<?php echo(FIELD_COL); ?>"><input type="number" name="field_price" id="field_price" class="form-control" value="<?php echo($page->field('price')); ?>" min="0" required /></div>
			</div>

			<div class="<?php echo(FORM_ROW); ?>">
				<div class="<?php echo(LABEL_COL); ?>"><label for="field_shipping_length">Shipping Length</label></div>
				<div class="<?php echo(FIELD_COL); ?>"><input type="number" name="field_shipping_length" id="field_shipping_length" class="form-control" value="<?php echo($page->field('shipping_length')); ?>" min="0" /></div>
			</div>

			<div class="<?php echo(FORM_ROW); ?>">
				<div class="<?php echo(LABEL_COL); ?>"><label for="field_shipping_weight">Shipping Weight</label></div>
				<div class="<?php echo(FIELD_COL); ?>"><input type="number" name="field_shipping_weight" id="field_shipping_weight" class="form-control" value="<?php echo($page->field('shipping_weight')); ?>" min="0" /></div>
			</div>

			<div class="<?php echo(FORM_ROW); ?>">
				<div class="<?php echo(LABEL_COL); ?>"><label for="field_shipping_height">Shipping Height</label></div>
				<div class="<?php echo(FIELD_COL); ?>"><input type="number" name="field_shipping_height" id="field_shipping_height" class="form-control" value="<?php echo($page->field('shipping_height')); ?>" min="0" /></div>
			</div>

			<div class="<?php echo(FORM_ROW); ?>">
				<div class="<?php echo(LABEL_COL); ?>"><label for="field_shipping_weight">Shipping Weight</label></div>
				<div class="<?php echo(FIELD_COL); ?>"><input type="number" name="field_shipping_weight" id="field_shipping_weight" class="form-control" value="<?php echo($page->field('shipping_weight')); ?>" min="0" /></div>
			</div>

			<div class="alert alert-info">Use whatever measurement units that your shipping gateway expects.</div>
		</fieldset>
	</div>

	<div class="<?php echo(TWO_COL); ?>">
		<fieldset class="padded">
			<legend>Video Links (full URL or the video ID)</legend>

			<div class="<?php echo(FORM_ROW); ?>">
				<div class="<?php echo(LABEL_COL); ?>"><label for="field_youtube">YouTube</label></div>
				<div class="<?php echo(FIELD_COL); ?>"><input type="text" name="field_youtube" id="field_youtube" class="form-control" value="<?php echo($page->field("youtube")); ?>" /></div>
			</div>
			<div class="<?php echo(FORM_ROW); ?>">
				<div class="<?php echo(LABEL_COL); ?>"><label for="field_vimeo">Vimeo</label></div>
				<div class="<?php echo(FIELD_COL); ?>"><input type="text" name="field_vimeo" id="field_vimeo" class="form-control" value="<?php echo($page->field("vimeo")); ?>" /></div>
			</div>
		</fieldset>
	</div>

	<div class="col-12">
		<fieldset class="padded">
			<legend>Images</legend>

			<?php
			$highest_index = 0;

			for($i=1; $i<=25; $i++)
			{
				$img = $page->field("image" . $i, false);

				if($img)
				{
					$highest_index = $i;
					?><input type="hidden" name="field_image<?php echo($i); ?>" id="field_image<?php echo($i); ?>" value="<?php echo($page->field("image" . $i)); ?>" /><?php
				}
			}
			?>
			<div class="dropzone" id="dropzone">drag &amp; drop images here or <a href="" onclick="jQuery('#image_upload').click(); return false;">click here to browse your computer</a></div>
			<div class="<?php echo(FIELD_COL); ?>"><input type="file" class="hidden" id="image_upload" multiple onchange="angular.element(this).scope().FileSelectHandler(this)" /></div>

			<div class="row">
				<div class="col-6 col-md-4 col-lg-3 col-xl-2 image-preview" ng-repeat="i in uploads">
					<a href="" ng-click="config.main_image=$index+1+<?php echo($highest_index); ?>" class="image-primary" title="Use this as the main photo"><em class="fa fa-fw fa-star"></em></a>
					<a href="" ng-click="deletePendingImage($index)" class="image-delete" title="Remove this photo"><em class="fa fa-fw fa-trash"></em></a>
					<img src="{{i.filename}}" class="product-thumbnail" ng-class="{main_image: config.main_image==$index+1+<?php echo($highest_index); ?>}" />
					<input type="hidden" name="field_image{{$index+1+<?php echo($highest_index); ?>}}" ng-value="i.filename" />
				</div>
				<?php
				for($i=1; $i<=25; $i++)
				{
					$img = $page->field("image" . $i, false);

					if($img)
					{
						$thumb = Mainframe::thumbnail(ABSOLUTE_PATH . $img, 400, 300, false, Mainframe::site()->webp ? IMAGETYPE_WEBP : null);
						?>
						<div class="col-6 col-md-4 col-lg-3 col-xl-2 image-preview">
							<a href="" ng-click="config.main_image=<?php echo($i); ?>" class="image-primary" title="Use this as the main photo"><em class="fa fa-fw fa-star"></em></a>
							<a href="" ng-click="deleteSavedImage(<?php echo($i); ?>)" class="image-delete" title="Remove this photo"><em class="fa fa-fw fa-trash"></em></a>
							<img src="<?php echo($thumb) ?>" class="product-thumbnail product-thumbnail<?php echo($i); ?>" ng-class="{main_image: config.main_image==<?php echo($i); ?>}" />
						</div>
						<?php
					}
				}
				?>
			</div>
		</fieldset>

		<fieldset class="padded">
			<legend>Description</legend>
			<?php
			FeralTextArea("field_content1", $page->field("content1"), "form-control");
			full_wysiwyg("field_content1");
			?>
		</fieldset>
	</div>
</div>
