{{template "header.html" "Image uploader | Mandible"}}
{{template "navbar.html"}}
{{template "modal_uploaded.html"}}
{{template "modal_error.html"}}

<div class="jumbotron">
	<div class="container">
		<h1>
			<i class="fa fa-picture-o"></i>
			Image Uploader</h1>
		<p>
			Quick, reliable image uploading.
		</p>
	</div>
</div>
<div class="container">
	<div class="row">
		<div class="col-md-6">
			<h2>
				<i class="fa fa-upload"></i>
				From File
			</h2>
			<p>
				<form method="POST" action="/api/v1/url" enctype="multipart/form-data">
					<input id="file" name="image" type="file" data-filename-placement="inside" title="Search for a file to add">
					<br>
					<a href="/api/v1/file" class="btn btn-material-indigo-A700 btn-upload hidden" id="imageSubmit" data-loading-text="Uploading..." autocomplete="off">Upload!</a>
					</form>
			</p>
		</div>
		<div class="col-md-6">
			<h2>
				<i class="fa fa-link"></i>
				From URL
			</h2>
			<p>
				<form method="POST" action="/api/v1/url" enctype="multipart/form-data">
					<input id="urlBar" name="image" class="form-control expand" placeholder="Link to image" type="text">
					<br>
					<a class="btn btn-material-indigo-A700 btn-upload hidden" id="urlSubmit" data-loading-text="Uploading..." autocomplete="off">Fetch the image!</a>
				</form>
			</p>
		</div>
	</div>
	<div class="row">
		<div class="col-md-6">
			<h2>
				<i class="fa fa-file-code-o"></i>
				From Data URI
			</h2>
			<p>
				<form method="POST" action="/api/v1/base64" enctype="multipart/form-data">
					<input id="base64Bar" name="image" class="form-control expand" placeholder="Base64 encoded image" type="text">
					<br>
					<a class="btn btn-material-indigo-A700 btn-upload hidden" id="base64Submit" data-loading-text="Uploading..." autocomplete="off">Decode the image!</a>
				</form>
			</p>
		</div>
		<div class="col-md-6">
			<h2><i class="fa fa-terminal"></i> CLI Program</h2>
			<p>Use the image hoster direct from the command line.</p>
			<p><code>$ imgup http://i.imgur.com/s9zxmYe.jpg cat.png</code></p>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<h2>
				<i class="fa fa-exchange"></i>

				Communicate via API</h2>
			<p>Easy access the image hoster from your own applications with our REST-Like interface. Works with most common frameworks as well as from the command line.<br>
			To read more and check out the examples please follow this link.
			<br>
			<a href="/api" title="API Documentation" class="btn btn-material-indigo-A700"><span class="fa fa-info-circle"></span> Read here more! &raquo;</a></p>
		</div>
	</div>
</div>
	<div class="row">
	</div>
{{template "footer.html"}}