<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Ebro Admin Template v1.3</title>
		
		<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
		
	<!-- bootstrap framework-->
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<!-- todc-bootstrap -->
		<link rel="stylesheet" href="css/todc-bootstrap.min.css">
	<!-- font awesome -->        
		<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
	<!-- flag icon set -->        
		<link rel="stylesheet" href="img/flags/flags.css">
	<!-- retina ready -->
		<link rel="stylesheet" href="css/retina.css">
	<!-- bootstrap switch -->
		<link rel="stylesheet" href="js/lib/bootstrap-switch/stylesheets/bootstrap-switch.css">
		<link rel="stylesheet" href="js/lib/bootstrap-switch/stylesheets/ebro_bootstrapSwitch.css">	
	
	<!-- aditional stylesheets -->
        <!-- multiuplaod -->
			<link rel="stylesheet" href="js/lib/jQuery-File-Upload/css/jquery.fileupload-ui.css">

	<!-- ebro styles -->
		<link rel="stylesheet" href="css/style.css">
	<!-- ebro theme -->
		<link rel="stylesheet" href="css/theme/color_1.css" id="theme">
		
	<!--[if lt IE 9]>
		<link rel="stylesheet" href="css/ie.css">
		<script src="js/ie/html5shiv.js"></script>
		<script src="js/ie/respond.min.js"></script>
		<script src="js/ie/excanvas.min.js"></script>
	<![endif]-->

	<!-- custom fonts -->
		<link href='http://fonts.googleapis.com/css?family=Roboto:300,700&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'>
			
	</head>
	<body class=" sidebar_hidden side_fixed">
		<div id="wrapper_all">
			<header id="top_header">
				<div class="container">
					<div class="row">
						<div class="col-xs-6 col-sm-2">
							<a href="dashboard1.html" class="logo_main" title="Ebro Admin Template:"><img src="img/logo_main.png" alt=""></a>
						</div>
						<div class="col-sm-push-4 col-sm-3 text-right hidden-xs">
							<div class="notification_dropdown dropdown">
								<a href="#" class="notification_icon dropdown-toggle" data-toggle="dropdown">
									<span class="label label-danger">8</span>
									<i class="icon-comment-alt icon-2x"></i>
								</a>
								<ul class="dropdown-menu">
									<li>
										<div class="dropdown_heading">Comments</div>
										<div class="dropdown_content">
											<ul class="dropdown_items">
												<li>
													<h3><span class="small_info">12:43</span><a href="#">Lorem ipsum dolor&hellip;</a></h3>
													<p>Lorem ipsum dolor sit amet&hellip;</p>
												</li>
												<li>
													<h3><span class="small_info">Today</span><a href="#">Lorem ipsum dolor&hellip;</a></h3>
													<p>Lorem ipsum dolor sit amet&hellip;</p>
												</li>
												<li>
													<h3><span class="small_info">14 Aug</span><a href="#">Lorem ipsum dolor&hellip;</a></h3>
													<p>Lorem ipsum dolor sit amet&hellip;</p>
												</li>
											</ul>
										</div>
										<div class="dropdown_footer"><a href="#" class="btn btn-sm btn-default">Show all</a></div>
									</li>
								</ul>
							</div>
							<div class="notification_separator"></div>
							<div class="notification_dropdown dropdown">
								<a href="#" class="notification_icon dropdown-toggle" data-toggle="dropdown">
									<span class="label label-danger">12</span>
									<i class="icon-envelope-alt icon-2x"></i>
								</a>
								<ul class="dropdown-menu dropdown-menu-wide">
									<li>
										<div class="dropdown_heading">Messages</div>
										<div class="dropdown_content">
											<ul class="dropdown_items">
												<li>
													<h3><a href="#">Lorem ipsum dolor sit amet</a></h3>
													<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
													<p class="large_info">Sean Walter, 24.05.2014</p>
													<i class="icon-exclamation-sign indicator"></i>
												</li>
												<li>
													<h3><a href="#">Lorem ipsum dolor&hellip;</a></h3>
													<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aliquam assumenda&hellip;</p>
													<p class="large_info">Sean Walter, 24.05.2014</p>
												</li>
												<li>
													<h3><a href="#">Lorem ipsum dolor&hellip;</a></h3>
													<p>Lorem ipsum dolor sit amet, consectetur&hellip;</p>
													<p class="large_info">Sean Walter, 24.05.2014</p>
													<i class="icon-exclamation-sign indicator"></i>
												</li>
											</ul>
										</div>
										<div class="dropdown_footer">
											<a href="#" class="btn btn-sm btn-default">Show all</a>
											<div class="pull-right dropdown_actions">
												<a href="#"><i class="icon-refresh"></i></a>
												<a href="#"><i class="icon-cog"></i></a>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
						<div class="col-xs-6 col-sm-push-4 col-sm-3">
							<div class="pull-right dropdown">
								<a href="#" class="user_info dropdown-toggle" title="Jonathan Hay" data-toggle="dropdown">
									<img src="img/user_avatar.png" alt="">
									<span class="caret"></span>
								</a>
								<ul class="dropdown-menu">
									<li><a href="user_profile.html">Profile</a></li>
									<li><a href="javascript:void(0)">Another action</a></li>
									<li><a href="login_page.html">Log Out</a></li>
								</ul>
							</div>
						</div>
						<div class="col-xs-12 col-sm-pull-6 col-sm-4">
							<form class="main_search">
								<input type="text" id="search_query" name="search_query" class="typeahead form-control">
								<button type="submit" class="btn btn-primary btn-xs"><i class="icon-search icon-white"></i></button>
							</form> 
						</div>
					</div>
				</div>
			</header>						
			<nav id="top_navigation">
				<div class="container">
					<ul id="icon_nav_h" class="top_ico_nav clearfix">
						<li>
							<a href="#">
								<i class="icon-home icon-2x"></i>
								<span class="menu_label">Home</span>
							</a>
						</li>
						<li>             
							<a href="#">
								<i class="icon-edit icon-2x"></i>
								<span class="menu_label">Content</span>
							</a>
						</li>
						<li>             
							<a href="#">
								<i class="icon-group icon-2x"></i>
								<span class="menu_label">Users</span>
							</a>
						</li>
						<li>             
							<a href="#">
								<span class="label label-danger">12</span>
								<i class="icon-tasks icon-2x"></i>
								<span class="menu_label">Tasks</span>
							</a>
						</li>
						<li>             
							<a href="#">
								<i class="icon-beaker icon-2x"></i>
								<span class="menu_label">Plugins</span>
							</a>
						</li>
						<li class="active">             
							<a href="#">
								<i class="icon-book icon-2x"></i>
								<span class="menu_label">Help</span>
							</a>
						</li>
						<li>             
							<a href="#">
								<span class="label label-success">$2 347</span>
								<i class="icon-tags icon-2x"></i>
								<span class="menu_label">E-Commerce</span>
							</a>
						</li>
						<li>             
							<a href="#">
								<i class="icon-wrench icon-2x"></i>
								<span class="menu_label">Settings</span>
							</a>
						</li>
					</ul>
				</div>
			</nav>
			<!-- mobile navigation -->
			<nav id="mobile_navigation"></nav>
			
			<section id="breadcrumbs">
				<div class="container">
					<ul>
						<li><a href="#">Ebro Admin</a></li>
						<li><a href="#">Forms</a></li>
						<li><span>Multiupload</span></li>						
					</ul>
				</div>
			</section>
			<section class="container clearfix main_section">
				<div id="main_content_outer" class="clearfix">
					<div id="main_content">
						
						<!-- main content -->
                        <div class="row">
                            <div class="col-sm-12">
								<div class="alert alert-info">
									<button type="button" class="close" data-dismiss="alert">&times;</button>
									Upload disabled, for demo please check <a href="http://blueimp.github.io/jQuery-File-Upload/">http://blueimp.github.io/jQuery-File-Upload/</a>
								</div>
								<div class="panel panel-default">
									<div class="panel-heading">
										<h4 class="panel-title">Complex Example</h4>
									</div>
									<div class="panel-body">
										<form id="fileupload" action="/" method="POST" enctype="multipart/form-data" class="multiupload">
											<!-- Redirect browsers with JavaScript disabled to the origin page -->
											<noscript>To use mutliupload please enable Javascript in your browser.</noscript>
											<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
											<div class="row fileupload-buttonbar">
												<div class="col-lg-7">
													<!-- The fileinput-button span is used to style the file input field as button -->
													<span class="btn btn-success fileinput-button">
														<i class="glyphicon glyphicon-plus"></i>
														<span>Add files...</span>
														<input type="file" name="files[]" multiple>
													</span>
													<button type="submit" class="btn btn-primary start" disabled>
														<i class="glyphicon glyphicon-upload"></i>
														<span>Start upload</span>
													</button>
													<button type="reset" class="btn btn-warning cancel">
														<i class="glyphicon glyphicon-ban-circle"></i>
														<span>Cancel upload</span>
													</button>
													<button type="button" class="btn btn-danger delete">
														<i class="glyphicon glyphicon-trash"></i>
														<span>Delete</span>
													</button>
													<input type="checkbox" class="toggle">
													<!-- The loading indicator is shown during file processing -->
													<span class="fileupload-loading"></span>
												</div>
												<!-- The global progress information -->
												<div class="col-lg-5 fileupload-progress fade sepH_a">
													<!-- The extended global progress information -->
													<div class="progress-extended sepH_a">&nbsp;</div>
													<!-- The global progress bar -->
													<div class="progress progress-small progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
														<div class="progress-bar progress-success" style="width:0%;"></div>
													</div>
												</div>
											</div>
											<!-- The table listing the files available for upload/download -->
											<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
										</form>
									</div>
								</div>
							</div>
                        </div>

					</div>
				</div>
			</section>
			<div id="footer_space"></div>
		</div>
	
        <footer id="footer">
            <div class="container">
                <div class="row">
                    <div class="col-sm-3">
                        &copy; 2013 Your Company
                    </div>
                    <div class="col-sm-8">
                        <ul>
                            <li><a href="#">Dashboard</a></li>
                            <li>&middot;</li>
                            <li><a href="#">Terms of Service</a></li>
                            <li>&middot;</li>
                            <li><a href="#">Privacy Policy</a></li>
                            <li>&middot;</li>
                            <li><a href="#">Contact us</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-1 text-right">
                        <small class="text-muted">v1.3</small>
                    </div>
                </div>
            </div>
        </footer>
        	
		<nav id="side_fixed_nav">
			<div class="slim_scroll">
				<div class="side_nav_actions">
					<a href="javascript:void(0)" id="side_fixed_nav_toggle"><span class="icon-align-justify"></span></a>
					<div id="toogle_nav_visible" class="make-switch switch-mini" data-on="success" data-on-label="<i class='icon-lock'></i>" data-off-label="<i class='icon-unlock-alt'></i>">
						<input id="nav_visible_input" type="checkbox">
					</div>
				</div>
				<ul id="text_nav_side_fixed">
					<li>
						<a href="javascript:void(0)"><span class="icon-dashboard"></span>Dashboard</a>
						<ul>
							<li><a href="dashboard.html">Dashboard</a></li>
							<li><a href="dashboard_drag_drop.html">Drag & Drop Dashboard</a></li>
							<li>
								<a href="javascript:void(0)">Navigations</a>
								<ul>
									<li><a href="nav_side_accordion.html">Accordion Navigation</a></li>
									<li><a href="nav_side_icons.html">Icon Navigation</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<a href="javascript:void(0)"><span class="icon-th-list"></span>Forms</a>
						<ul>
							<li><a href="form_regular_elements.html">Regular elements</a></li>
							<li><a href="form_extended_elements.html">Extended elements</a></li>
							<li class="link_active"><a href="form_multiupload.html">Multiupload</a></li>
							<li><a href="form_validation.html">Form validation</a></li>
							<li><a href="wizard.html">Wizard</a></li>
							<li><a href="wysiwg.html">WYSIWG Editor</a></li>
						</ul>
					</li>
					<li>
						<a href="javascript:void(0)"><span class="icon-puzzle-piece"></span>Components</a>
						<ul>
							<li><a href="calendar.html">Calendar</a></li>
							<li><a href="charts.html">Charts</a></li>
							<li><a href="contact_list.html">Contact List</a></li>
							<li><a href="editable_elements.html">Editable Elements</a></li>
							<li><a href="file_manager.html">File manager</a></li>
							<li><a href="gallery.html">Gallery</a></li>
							<li><a href="gmaps.html">Google Maps</a></li>
							<li>
								<a href="javascript:void(0)">Tables</a>
								<ul>
									<li><a href="datatables.html">Datatables</a></li>
									<li><a href="regular_tables.html">Regular</a></li>
									<li><a href="slick_grid.html">Slick Grid</a></li>
									<li><a href="table_responsive.html">Responsive Table</a></li>
								</ul>
							</li>
							<li><a href="tree_plugin.html">Tree Plugin</a></li>
						</ul>
					</li>
					<li>
						<a href="javascript:void(0)"><span class="icon-beaker"></span>UI Elements</a>
						<ul>
							<li><a href="alerts_buttons.html">Alerts, Buttons</a></li>
							<li><a href="grid.html">Grid</a></li>
							<li><a href="icons.html">Icons</a></li>
							<li><a href="notifications.html">Notifications</a></li>
							<li><a href="panels.html">Panels</a></li>
							<li><a href="tabs_accordions.html">Tabs, Accordions</a></li>
							<li><a href="tooltips_popovers.html">Tooltips, Popovers</a></li>
							<li><a href="typography.html">Typography</a></li>
						</ul>
					</li>
					<li>
						<a href="javascript:void(0)"><span class="icon-leaf"></span>Other Pages</a>
						<ul>
							<li><a href="blank.html">Blank page</a></li>
							<li><a href="chat.html">Chat</a></li>
							<li><a href="contact_page.html">Contact Page</a></li>
							<li><a href="error_404.html">Error 404</a></li>
							<li><a href="help_faq.html">Help/Faq</a></li>
							<li><a href="invoices.html">Invoices</a></li>
							<li><a href="landing_page.html">Landing Page</a></li>
							<li><a href="login_page.html">Login Page</a></li>
							<li><a href="mailbox.html">Mailbox</a></li>
							<li><a href="pricing_table.html">Pricing Table</a></li>
							<li><a href="search_page.html">Search Page</a></li>
							<li><a href="settings.html">Site Settings</a></li>
							<li><a href="user_profile.html">User profile</a></li>
						</ul>
					</li>				
				</ul>
			</div>
		</nav>

	<!--[[ common plugins ]]-->
	
	<!-- jQuery -->
		<script src="js/jquery.min.js"></script>
	<!-- bootstrap framework -->
		<script src="bootstrap/js/bootstrap.min.js"></script>
	<!-- jQuery resize event -->
		<script src="js/jquery.ba-resize.min.js"></script>
	<!-- jquery cookie -->
		<script src="js/jquery_cookie.min.js"></script>
	<!-- retina ready -->
		<script src="js/retina.min.js"></script>
	<!-- typeahead -->
		<script src="js/lib/typeahead.js/typeahead.min.js"></script>
		<script src="js/lib/typeahead.js/hogan-2.0.0.js"></script>

	<!-- tinyNav -->
		<script src="js/tinynav.js"></script>
	<!-- slimscroll -->
		<script src="js/lib/jQuery-slimScroll/jquery.slimscroll.min.js"></script>
	
	<!-- bootstrap switch -->
		<script src="js/lib/bootstrap-switch/js/bootstrap-switch.min.js"></script>
	
	<!-- touchSwipe -->
		<script src="js/lib/TouchSwipe/jquery.touchSwipe.min.js"></script>
		
	<!-- Navgoco -->
		<script src="js/lib/navgoco/jquery.navgoco.min.js"></script>
		
	<!-- ebro common scripts/functions -->
		<script src="js/ebro_common.js"></script>
	
	
	<!--[[ page specific plugins ]]-->

		<!-- jqueryUI -->
			<script src="js/lib/jquery_ui/jquery-ui-1.10.3.custom.min.js"></script>
		
		<!-- multiupload -->
			<script src="js/lib/jQuery-File-Upload/js/jquery.fileupload.all.js"></script>
		<!-- The template to display files available for upload -->
			<script id="template-upload" type="text/x-tmpl">
			{% for (var i=0, file; file=o.files[i]; i++) { %}
				<tr class="template-upload fade">
					<td class="upload_img">
						<span class="preview img-thumbnail"></span>
					</td>
					<td class="upload_info">
						{% if (file.error) { %}
							<div><span class="label label-important">Error</span> {%=file.error%}</div>
						{% } %}
						<p class="name">{%=file.name%}</p>
						<p class="size">{%=o.formatFileSize(file.size)%}</p>
						{% if (!o.files.error) { %}
							<div class="progress progress-striped progress-small active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
						{% } %}
					</td>
					<td class="upload_actions">
						{% if (!o.files.error && !i && !o.options.autoUpload) { %}
							<button class="btn btn-primary btn-sm start">
								<i class="glyphicon glyphicon-upload"></i>
								<span>Start</span>
							</button>
						{% } %}
						{% if (!i) { %}
							<button class="btn btn-warning btn-sm cancel">
								<i class="glyphicon glyphicon-ban-circle"></i>
								<span>Cancel</span>
							</button>
						{% } %}
					</td>
				</tr>
			{% } %}
			</script>
		<!-- The template to display files available for download -->
			<script id="template-download" type="text/x-tmpl">
			{% for (var i=0, file; file=o.files[i]; i++) { %}
				<tr class="template-download fade">
					<td class="download_img">
						<span class="preview img-thumbnail">
							{% if (file.thumbnail_url) { %}
								<a href="{%=file.url%}" title="{%=file.name%}" class="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
							{% } %}
						</span>
					</td>
					<td class="download_info">
						{% if (file.error) { %}
							<div><span class="label label-important">Error</span> {%=file.error%}</div>
						{% } %}
						<p class="name">
							<a href="{%=file.url%}" title="{%=file.name%}" class="{%=file.thumbnail_url?'gallery':''%}" download="{%=file.name%}">{%=file.name%}</a>
						</p>
						<p class="size">{%=o.formatFileSize(file.size)%}</p>
					</td>
					<td class="download_actions">
						<button class="btn btn-danger delete" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"{% if (file.delete_with_credentials) { %} data-xhr-fields="{'withCredentials':true}"{% } %}>
							<i class="glyphicon glyphicon-trash"></i>
							<span>Delete</span>
						</button>
						<input type="checkbox" name="delete" value="1" class="toggle">
					</td>
				</tr>
			{% } %}
			</script>
			
			<script src="js/pages/ebro_form_multiupload.js"></script>


	<!--[if lte IE 9]>
		<script src="js/ie/jquery.placeholder.js"></script>
		<script>
			$(function() {
				$('input, textarea').placeholder();
			});
		</script>
	<![endif]-->
	
    <!-- style switcher -->
		<div id="style_switcher" class="switcher_open">
            <a href="#" class="switcher_toggle"><i class="icon-cog"></i></a>
			<div class="style_items">
				<p class="style_title">Theme</p>
				<ul class="clearfix" id="theme_switch">
					<li class="style_active" style="background:#48ac2e" title="color_1">Color 1</li>
					<li style="background:#993399" title="color_2">Color 2</li>
					<li style="background:#168cbe" title="color_3">Color 3</li>
					<li style="background:#d61110" title="color_4">Color 4</li>
					<li style="background:#e96710" title="color_5">Color 5</li>
					<li style="background:#262626" title="color_6">Color 6</li>
					<li style="background:#01aaad" title="color_7">Color 7</li>
					<li style="background:#9c5100" title="color_8">Color 8</li>
					<li style="background:#e31a8f" title="color_9">Color 9</li>
					<li style="background:#ffbb0e" title="color_10">Color 10</li>
					<li style="background:#79be0b" title="color_11">Color 11</li>
					<li style="background:#887171" title="color_12">Color 12</li>
					<li style="background:#28abe2" title="color_13">Color 13</li>
					<li style="background:#2f7138" title="color_14">Color 14</li>
					<li style="background:#ce4627" title="color_15">Color 15</li>
					<li style="background:#693986" title="color_16">Color 16</li>
					<li style="background:#7f8c8d" title="color_17">Color 17</li>
					<li style="background:#2c3e50" title="color_18">Color 18</li>
					<li style="background:#34495e" title="color_19">Color 19</li>
					<li style="background:#1abc9c" title="color_20">Color 20</li>
				</ul>
			</div>
			<div class="style_items" id="sidebar_switch">
				<p class="style_title">Sidebar position</p>
				<label class="radio-inline">
					<input type="radio" name="sidebar_position" id="sidebar_left" value="left" checked> Left
				</label>
				<label class="radio-inline">
					<input type="radio" name="sidebar_position" id="sidebar_right" value="right"> Right
				</label>
			</div>
			<div class="style_items" id="layout_switch">
				<p class="style_title">Layout</p>
				<select name="layout_style" id="layout_style" class="form-control">
					<option value="fixed">Fixed</option>
					<option value="full_width" class="hidden-sm hidden-md">Full Width</option>
					<option value="boxed" class="hidden-sm hidden-md">Boxed</option>
				</select>
			</div>
			<div class="style_items" id="style_pattern">
				<p class="style_title">Pattern (boxed layout)</p>
				<ul class="clearfix">
					<li class="pattern_active" style="background:url(img/patterns/pattern_1.png) no-repeat 0 0" title="pattern_1">Pattern 1</li>
					<li style="background:url(img/patterns/pattern_2.png) no-repeat 0 0" title="pattern_2">Pattern 2</li>
					<li style="background:url(img/patterns/pattern_3.png) no-repeat 0 0" title="pattern_3">Pattern 3</li>
					<li style="background:url(img/patterns/pattern_4.png) no-repeat 0 0" title="pattern_4">Pattern 4</li>
					<li style="background:url(img/patterns/pattern_5.png) no-repeat 0 0" title="pattern_5">Pattern 5</li>
					<li style="background:url(img/patterns/pattern_6.png) no-repeat 0 0" title="pattern_6">Pattern 6</li>
					<li style="background:url(img/patterns/pattern_7.png) no-repeat 0 0" title="pattern_7">Pattern 7</li>
					<li style="background:url(img/patterns/pattern_8.png) no-repeat 0 0" title="pattern_8">Pattern 8</li>
					<li style="background:url(img/patterns/pattern_9.png) no-repeat 0 0" title="pattern_9">Pattern 9</li>
					<li style="background:url(img/patterns/pattern_10.png) no-repeat 0 0" title="pattern_10">Pattern 10</li>
				</ul>
			</div>
			<div class="text-center">
				<button class="btn btn-default" id="style_reset">Reset</button>
			</div>
        </div>
	</body>
</html>