<div id="upload">
	<div data-step="1" class="call-box">
		<h2>Click the image to get started.</h2>
		<form id="rawPhotoForm">
			<div id="examplePhoto">{{example_photo|safe}}
				<div id="example-photo-overlay">Upload</div>
			</div>
		</form>
	</div>
	
	<div data-step="2" style="display:none">
		<div class="canvas-container" style="position:relative">
			<canvas id="canvas" style="position:absolute; left:0; top:0;" width="390" height="390"></canvas>
			<div id="preview"></div>
		</div>
		<h2>Enter your name and click Save and Share to take action</h2>
		<div class="field">
	 		<label for="name">Your Name</label>
 			<input id="name" type="text" name="name" maxlength="16" />
 			<span id="charcount" style="font-size: 10px;"></span>
 		
 			<input type='file' id='fileInput' name='files[]' accept="image/*" capture />
 			<img id="canvasImg" src="" style="display:none">
 		</div>
		<div class="social-buttons-container">
			<a class="pw-btn" id="startOver" href="{{campaign_link}}" />Start Over</a>
			<!-- renamed id share-to-facebook to previewShare to enable modal-->
			<a class="pw-btn" id="previewShare" href="#">Save and Share</a>	
		</div>

	</div>
</div>

<div id="share-modal" style="display:none">
	<div id="close_modal"><span class="simplemodal-close">&times;</span></div>
	<div id="modal_message">
		<p>Create your share message:</p>
		<textarea placeholder="{{default_message}}"></textarea>
	</div>
	<div id="modal_image_preview">
	</div>
	<div class="social-buttons-container">
		<a class="pw-btn modal-button simplemodal-close" id="modal_cancel" href="#" />Go Back</a>
		<a class="pw-btn modal-button" id="modal_facebook_share" href="#">Share to Facebook</a>
	</div>
</div>
<br>

<div id="slug">{{title}}</div>
