{! admin/util/dates !}

<link rel="stylesheet" type="text/css" href="/apps/filemanager/css/colorbox/colorbox.css" />
<script src="/apps/filemanager/js/jquery.colorbox.min.js"></script>
<script>
$(function () {
	$('.preview').colorbox ({
		iframe:true,
		innerWidth: '85%',
		innerHeight: '85%'
	});
});
</script>

<div id="tabs">
	<ul>
		<li data-tab="0"><a href="#layouts">{"Layouts"}</a></li>
		<li data-tab="1"><a href="#stylesheets">{"Stylesheets"}</a></li>
	</ul>
	<div id="layouts">

<p>
	<a href="/designer/add/layout">{"New Layout"}</a>
	{% if User::require_acl ('designer/installer') %}
	&nbsp;|&nbsp;
	<a href="/designer/installer">{"Install App/Theme"}</a>
	{% end %}
</p>

<p>
<table width="100%">
	<tr>
		<th width="45%">{"Layout"}</th>
		<th width="25%">{"Last Modified"}</th>
		<th width="10%">{"File Size"}</th>
		<th width="20%">&nbsp;</th>
	</tr>
{% foreach layouts %}
	<tr>
		<td><a href="/designer/preview?layout={{ loop_value }}" class="preview iframe">{{ loop_value }}</a></td>
		<td>{{ loop_value|filemtime|I18n::date_time }}</td>
		<td>{{ loop_value|filesize|format_filesize }}</td>
		<td style="text-align: right">
			{% if locks[$data->loop_value] %}
			{"Editing Locked"}
			{% else %}
				{% if conf ('General', 'default_layout') == basename_html ($data->loop_value) %}
					<strong>Default</strong> |
				{% else %}
					<a href="/designer/makedefault?layout={{ loop_value|basename_html }}">{"Make default"}</a> |
				{% end %}
			<a href="/designer/edit/layout?file={{ loop_value }}">{"Edit"}</a> |
			<a href="/designer/delete?file={{ loop_value }}" onclick="return confirm ('{"Are you sure you want to permanently delete this layout file?"}');">{"Delete"}</a>
			{% end %}
		</td>
	</tr>
{% end %}
</table>
</p>

	</div>
	<div id="stylesheets">

<p>
	<a href="/designer/add/stylesheet">{"New Stylesheet"}</a>
	{% if User::require_acl ('designer/installer') %}
	&nbsp;|&nbsp;
	<a href="/designer/installer">{"Install App/Theme"}</a>
	{% end %}
</p>

<p>
<table width="100%">
	<tr>
		<th width="45%">{"Stylesheet"}</th>
		<th width="25%">{"Last Modified"}</th>
		<th width="10%">{"File Size"}</th>
		<th width="20%">&nbsp;</th>
	</tr>
{% foreach stylesheets %}
	<tr>
		<td><a href="/{{ loop_value }}" class="preview iframe">{{ loop_value }}</a></td>
		<td>{{ loop_value|filemtime|I18n::date_time }}</td>
		<td>{{ loop_value|filesize|format_filesize }}</td>
		<td style="text-align: right">
			{% if locks[$data->loop_value] %}
			{"Editing Locked"}
			{% else %}
			<a href="/designer/edit/stylesheet?file={{ loop_value }}">{"Edit"}</a> |
			<a href="/designer/delete?file={{ loop_value }}" onclick="return confirm ('{"Are you sure you want to permanently delete this stylesheet file?"}');">{"Delete"}</a>
			{% end %}
		</td>
	</tr>
{% end %}
</table>
</p>

	</div>
</div>

<style>

.ui-tabs-panel {
	padding-top: 15px;
}

.ui-tabs-hide {
	display: none;
}

.ui-tabs-nav {
	list-style: none;
	border-bottom: 1px solid #93278f;
	padding: 0px;
	margin: 0px;
	padding-bottom: 2px;
}

.ui-state-default {
	display: inline;
	margin: 0px;
	padding: 0px;
}

	.ui-state-default a {
		text-decoration: none;
		margin: 0px;
		line-height: 20px;
		padding: 5px 10px 5px 10px;
		background: #e5e5e5;
		color: #222;
		border-right: 1px solid #ccc;
		outline: none;
	}
	
	.ui-state-default a:hover {
		background: #dddddd; /* Old browsers */
		background: -moz-linear-gradient(top,  #dddddd 0%, #cccccc 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #dddddd 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #dddddd 0%,#cccccc 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #dddddd 0%,#cccccc 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #dddddd 0%,#cccccc 100%); /* W3C */
		color: #93278f;
	}

	.ui-state-active a {
		background: #dddddd; /* Old browsers */
		background: -moz-linear-gradient(top,  #dddddd 0%, #cccccc 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #dddddd 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #dddddd 0%,#cccccc 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #dddddd 0%,#cccccc 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #dddddd 0%,#cccccc 100%); /* W3C */
		color: #93278f;
		border-right: 0px;
		outline: none;
	}
	
	.ui-state-active a:hover {
		background: #dddddd; /* Old browsers */
		background: -moz-linear-gradient(top,  #dddddd 0%, #cccccc 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #dddddd 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #dddddd 0%,#cccccc 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #dddddd 0%,#cccccc 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #dddddd 0%,#cccccc 100%); /* W3C */
		color: #93278f;
	}

</style>
<script src="/js/jquery-ui/jquery-ui.min.js"></script>
<script src="/js/jstorage.js"></script>
<script>
$(function () {
	var key = 'elefant-designer-tab',
		open = $.jStorage.get (key) || 0;

	$('#tabs').tabs ({
		active: open,
		activate: function (event, ui) {
			$.jStorage.set (key, ui.newTab.data ('tab'));
		}
	});
});
</script>

