<style>
	.form-profile {
		padding: 20px 20px;
		width: auto;
	}
	.form .row-item .btn {
		padding: 8px 16px;
		margin-bottom: 3px;
		margin-top: 7px;
		margin-left: 0px;
	}
	.form-profile .wrap-btn-submit {
		padding-top: 0px;
	}
</style>

<form action="/profile/edit" method="post">

	<div class="row-item clearfix" style="padding-bottom:0;">
		<label class="lbl" for="txt_name1">Upload Images</label>
		<div class="val">
			<div>
				<?php
				$total_images = count($user['images']);
				?>
				<?php
				if ($total_images >= 20) { ?>
				<div style="font-size:17px; font-weight:300;">
					Only 20 images maximum allowed.
				</div>
				<?php } else { ?>
				<div class="fileUpload" rel="/profile/upload">
					<span>Upload</span>
					<input type="file" class="upload" data-type="image" />
				</div>
				<span class="maxsize">(max size: 10MB*)</span>
				<? } ?>
				<div style="clear:both"></div>
			</div>
			<p class="rs description-input">20 Max Images allowed</p>
		</div>
	</div>

	<?php if ($total_images >= 20) { ?>

	<?php } else { ?>
	<p class="wrap-btn-submit rs ta-r">
		<button class="btn btn-blue btn-submit-all">Save Images</button>
	</p>
	<? } ?>

	<h3>Preview of your <?= $total_images ?> images...</h3>
	<?php
	foreach ($user['images'] as $image) {
		//print_r($image);
		echo "<img src='/{$image['file']}' style='margin:5px 0; margin-right:8px; width:160px' onerror=\"this.src='/static/system/no_image_available.png'\" /><a href='?profileimagesDeleteFile={$image['id']}'>delete</a><br />";
	}
	?>

</form>