<% include ../../shared/header %>
<% include ../../shared/nav %>
<script type="text/javascript">
<%- locals.viewhelper.passObjToClient(themesettings,"themesettings") %>
window.settingspage = "themes";
</script>
	<div class="_pea-container">
		<div class="_pea-row">
			<input type="hidden" name="_csrf" value=<%= locals.token %> >
			<div id="theme-console" class="_pea-hidden _pea-document">
				<div class="_pea_row">
					<div class="_pea-col-span12">
						<h2>Console Output <small><a id="hide-theme-console" class="">(hide)</a></small></h2>
					</div>
				</div>
				<div class="_pea_row">
					<div class="_pea-col-span12" id="theme-console-output">
					loading data...
					</div>
					<hr/>
				</div>
			</div>
			<article class="_pea-col-span12">
				<% include ../../shared/html_inject_precontent %>
				<div id="tabs" class="tabs">
		      <nav>
			      <ul class="_pea-col-span12">
			      	<li class="_pea-col-span4">Switch Themes</li>
			      	<li class="_pea-col-span4">Add New Themes</li>
			      	<li class="_pea-col-span4">Theme Settings</li>
			      </ul>
		      </nav>
		      <div class="content">
		        <section>
		        	<div class="_pea-document">
								<table id="installed-theme-table" class="_pea-table _pea-no-bottomborder  _pea-form">
									<thead>
										<tr class="_pea-text-left">
											<th class="_pea-col-span12" colspan="3">Name</th>
										</tr>
									</thead>
									<tbody id="installed-theme-tablebody">
										<% if(themes.length>0){
												themes.forEach(function(theme){ %>
													<tr id="tr-theme-<%= theme %>">
														<td class="_pea-col-span6"> 
															<a data-themename="<%= theme %>" href="/p-admin/theme/<%= theme %>/"> <%= theme %>
															</a>
														</td>
														<td class="_pea-col-span4 _pea-text-right">
														</td>
														<td class="_pea-col-span2 _pea-text-right">
															<%if(theme === activetheme){%>
																<a data-themename="<%= theme %>" data-href="/p-admin/theme/<%= theme %>/enable" class="_pea-button switch-theme-button _pea-color-info">active</a>
															<%}
															else{%>
																<a data-themename="<%= theme %>" data-href="/p-admin/theme/<%= theme %>/enable" class="_pea-button switch-theme-button enable-theme-button">switch</a>
															<%}%>
															<!-- <a data-themename="<%= theme %>" data-token="<%= locals.token %>" data-href="/p-admin/theme/<%= theme %>/delete" class="_pea-button _pea-color-error delete-theme-button">delete</a> -->
															<a data-themename="<%= theme %>" data-href="/p-admin/theme/<%= theme %>/delete" class="_pea-button _pea-color-error _pea-dialog-delete" data-successfunction="deletedThemeCallback" >delete</a>

														</td>
													</tr>
													<%
												});
											}
											else{ %>
												<tr><td colspan="4" class="_pea-text-center">No Themes!</td></tr>
											<%} %>
									</tbody>
								</table>
							</div>
		        </section>
		        <section>
		        	<div class="_pea-document">
								<div class="_pea-row">
									<div class="_pea-col-span9">
										<div class="_pea-row _pea-container-forminput _pea-text-center _pea-form">
											<input type="text" id="search-theme_input" class="_pea-col-span10" placeholder="Search" name="search-theme_input"/>
											<input type="submit" name="search-theme_button" id="search-theme_button" value="Search" class="_pea-button _pea-col-span2 _pea-color-default"/>
										</div>
									</div>
									<div class="_pea-col-span1">
										<div class="_pea-row _pea-container-forminput _pea-text-center">
										or								
										</div>
									</div>
									<div class="_pea-col-span2">
										<div class="_pea-row _pea-container-forminput _pea-text-center _pea-form">
											<input type="hidden" name="_csrf" value=<%= locals.token %> >
											<input type="file" name="upload-theme_button" id="upload-theme_button" value="Upload" class="_pea-button _pea-col-span12 _pea-color-default"/>
										</div>
									</div>
								</div>
								<table id="theme-search-results" class="_pea-hidden _pea-table _pea-no-bottomborder _pea-form">
									<thead>
										<tr class="_pea-text-left">
											<th>Name</th>
											<th>Description</th>
											<th class="_pea-text-right">Install</th>
										</tr>
									</thead>
									<tbody id="theme-search-results-tbody">
										
									</tbody>
								</table>
							</div>
		        </section>
		        <section>
		        	<form class="_pea-form _pea-ajax-form noFormSubmit" method="post" action="/p-admin/settings/updatethemesettings">
								<input type="hidden" name="_csrf" value=<%= locals.token %> >
								<div class="_pea-document">
									<div class="_pea-row">
										<p>Updates <a class="_pea-button">content/config/themes/<%- themesettings.readonly.name %>/periodicjs.theme.json</a> and restarts your application.</p>
										<h3>Configuration Options [<%- themesettings.environment %>]</h3>
										<p class="extra-padding">
											<div id="themesettings-config"></div>
										</p>
										<h3>Advanced Settings</h3>
										<p class="extra-padding">
												<a href="/p-admin/theme/<%- themesettings.readonly.name %>" class=" _pea-button _pea-color-success " style="font-size: 110%;">Edit Advanced Theme Settings</a>
										</p>
										<h3>Read Only</h3>
										<p class="extra-padding">
											<div id="themesettings-readonly"></div>
										</p>
										<p class="_pea-text-center">
												<button type="submit" class=" _pea-button _pea-color-info " style="font-size: 110%;">Update Theme Settings</button>
										</p>
									</div>
								</div>
							</form>
		        </section>
	        </div>
	      </div>
	      
				<% include ../../shared/html_inject_postcontent %>

			</article>
		</div>
	</div>
	<div style="display:none">
		<div id="view-theme-info-modal">
			<h1 class="title" style="word-wrap: break-word;">Theme name</h1>
			<p class="desc">description</p>
			<p>
				<ul class="versions">
					<li>install <a class="install-theme-version">latest<a></li>
					<li>install 0.0.1</li>
				</ul>
			</p>
		</div>
	</div>
<% include ../../shared/footer %>
