{% extends "dash/_frame.twig" %}

{% block title %}
	{{ title }}
{% endblock %}

{% block stylesheets %}
	<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=cvvvb">
	{% endblock %}

	{% block mainContent %}
		<div id="settings-actions">
			<div id="buttons">
				<button id="save-toggle" title="save settings">
					<svg id="submit-update" class="icons">
						<use id="submit-update" xlink:href="/assets/images/global/sprite.svg#entypo-save"/>		
					</svg>
				</button>
				<button id="publish-pages" title="publish site">
					<svg id="submit-update" class="icons">
						<use id="submit-update" xlink:href="/assets/images/global/sprite.svg#entypo-publish"/>		
					</svg>
				</button>
				<button id="render-toggle" title="render on save toggle" data-render="{{ renderOnSave }}">
					<svg id="render-toggle" class="icons">
						<use id="submit-update" xlink:href="/assets/images/global/sprite.svg#entypo-circular-graph"/>		
					</svg>
				</button>				
			</div>
		</div>
		<div id="settings-index">
			<div id="settings-index-wrapper">
				<div id="member-settings">
					<div id="member-images" class="columns">
						<div class="column is-one-third">
							<div id="member-avatar-drop">
								<img id="avatar" src="{{member['avatar']}}" for="avatar-upload"/>
								<input id="avatar-upload" type="file" name="avatar-upload" />
							</div>
						</div>
						<div class="column is-two-thirds">
							<div id="site-background">
								<img id="background" src="{{background}}" alt="image for site background" for="background-upload"/>
								<input id="background-upload" type="file" name="backgrond-upload" />
							</div>
						</div>
					</div>					
					<div id="member-meta" class="columns">
						<div class="column is-one-third">
							<input type='text' name='handle' id='settings-handle' placeholder='handle' value="{{member['handle']}}" autofocus />
							<input type='text' name='email' id='settings-email' placeholder='email' value="{{member['email']}}" autofocus />
						</div>
						<div class="column is-one-third">
							<input type='text' name='base-url' id='settings-url' placeholder='url' value="{{baseUrl}}" autofocus />
							<input type='text' name='base-title' id='settings-title' placeholder='site title' value="{{siteTitle}}" autofocus />
						</div>
						<div class="column is-one-third">
							<textarea id="settings-desc" type='text' name='settings_desc' class='settings-dec' placeholder='description stuff', autofocus>{{desc}}</textarea>
						</div>
					</div>
				</div>
				<div id="feature-settings">
					<div id="features" class="columns">
						<div class="column">
							<div id="feature-api">
								{% if apiStatus is defined and apiStatus == "true" %}
									<button id="api-access-toggle" title="allow external api" data-enabled="true">
										<svg id="api-access-toggle" class="icons">
											<use id="api-access-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-landline"/>		
										</svg>
									</button>
									<span id="api-status">EXTERNAL API ACCESS ENABLED</span>
								{% else  %}
									<button id="api-access-toggle" title="allow external api" data-enabled="false">
										<svg id="api-access-toggle" class="icons">
											<use id="api-access-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-landline"/>		
										</svg>
									</button>
									<span id="api-status">EXTERNAL API ACCESS NOT ENABLED</span>
								{% endif  %}
							</div>
							
						</div>
						<div class="column">
							<div id="dynamic-api">
								{% if dynamicRenderStatus is defined and dynamicRenderStatus == "true" %}
									<button id="dynamic-render-toggle" title="allow external api" data-enabled="true">
										<svg id="dynamic-render-toggle" class="icons">
											<use id="dynamic-render-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-text-document-inverted"/>		
										</svg>
									</button>
									<span id="dynamic-render-status">DYNAMIC PAGE RENDERING</span>
								{% else  %}
									<button id="dynamic-render-toggle" title="allow external api" data-enabled="false">
										<svg id="dynamic-render-toggle" class="icons">
											<use id="dynamic-render-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-text-document-inverted"/>		
										</svg>
									</button>
									<span id="dynamic-render-status">STATIC PAGE RENDERING</span>
								{% endif  %}
							</div>
						</div>
					</div>
				</div>
				<div id="option-settings" class="columns">
					<div id="theme-settings" class="column">
						<label>THEMES</label>
						{% for theme in themes %}
							{% if theme.name == currentTheme %}
								<a href="#" id="{{theme.name}}" class="theme-select" data-enabled="true">{{theme['display-name']}}</a>
							{% else %}
								<a href="#" id="{{theme.name}}" class="theme-select" data-enabled="false">{{theme['display-name']}}</a>
							{% endif %}
						
						{% endfor %}
					</div>
					<div id="mail-settings" class="column">
						<label>EMAIL</label>
						{% if mailOption == "option-none" or mailOption == "" %}
							<a href="#" class="mail-option" id="option-none" data-enabled="true">NONE</a>
						{% else %}
							<a href="#"  class="mail-option" id="option-none" data-enabled="false">NONE</a>
						{% endif %}
						{% if mailOption == "option-mg" or mailOption == "" %}
							<a href="#"  class="mail-option" id="option-mg" data-enabled="true">MAILGUN</a>
						{% else %}
							<a href="#"  class="mail-option" id="option-mg" data-enabled="false">MAILGUN</a>
						{% endif %}
						{% if mailOption == "option-smtp" or mailOption == "" %}
							<a href="#"  class="mail-option" id="option-smtp" data-enabled="true">SMTP</a>
						{% else %}
							<a href="#"  class="mail-option" id="option-smtp" data-enabled="false">SMTP</a>
						{% endif %}
						
						{% apply spaceless %}
						  {{ include("dash/partials/mailforms.twig") }}
						{% endapply %} 
						<button id="send-mail">TEST MAIL</button>
						<br  /><br  />
						
					</div>
				</div>
				<div id="token-settings">
					<div id="keys-tokens" class="columns">
						<div class="column">
							<label>API KEY</label>
							<div id="member-api-key">
								{{member['key']}}
							</div>
							
						</div>
						<div class="column">
							<label>FORM TOKEN</label>
							<div id="form-token">
								{{ftoken}}
							</div>
						</div>
					</div>
					
				</div>
				<div id="backup-settings">
					<div class="columns">
						<div class="column">
							<button id="create-backup">BACK UP YOUR SITE</button><br  />
						</div>
						<div class="column">
							{% if lastBackup != '' %}
								<div class="backup-meta">
									LAST BACK UP <a href="/api/v1/files">{{lastBackup}}</a><br  />
								</div>
							{% else %}
								<span>span No back ups. Frowny face.</span>
							{% endif %}
						</div>
					</div>
					
				</div>
				
			</div>
			
		</div>
	{% endblock %}

	{% block javascripts %}
		<script src="/assets/scripts/dash.min.js?" type="text/javascript"></script>
	{% endblock %}