{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content admin notice">
	{{template "admin/navbar" .}}
	<div class="ui container">
		{{template "base/alert" .}}
		<h4 class="ui top attached header">
			{{.locale.Tr "admin.notices.system_notice_list"}} ({{.locale.Tr "admin.total" .Total}})
		</h4>
		<div class="ui attached table segment">
			<table id="notice-table" class="ui very basic select selectable table unstackable">
				<thead>
					<tr>
						<th></th>
						<th>ID</th>
						<th>{{.locale.Tr "admin.notices.type"}}</th>
						<th>{{.locale.Tr "admin.notices.desc"}}</th>
						<th width="100px">{{.locale.Tr "admin.users.created"}}</th>
						<th>{{.locale.Tr "admin.notices.op"}}</th>
					</tr>
				</thead>
				<tbody>
					{{range .Notices}}
						<tr>
							<td class="collapsing">
								<div class="ui fitted checkbox" data-id="{{.ID}}">
									<input type="checkbox">
								</div>
							</td>
							<td>{{.ID}}</td>
							<td>{{$.locale.Tr .TrStr}}</td>
							<td class="view-detail"><span class="notice-description text truncate">{{.Description}}</span></td>
							<td><span class="notice-created-time" data-tooltip-content="{{.CreatedUnix.AsTime}}"><time data-format="short-date" datetime="{{.CreatedUnix.FormatLong}}">{{.CreatedUnix.FormatShort}}</time></span></td>
							<td><a href="#">{{svg "octicon-note" 16 "view-detail"}}</a></td>
						</tr>
					{{end}}
				</tbody>
				{{if .Notices}}
					<tfoot class="full-width">
							<tr>
								<th></th>
								<th colspan="5">
									<form class="ui right" method="post" action="{{AppSubUrl}}/admin/notices/empty">
										{{.CsrfTokenHtml}}
										<button type="submit" class="ui red small button">{{.locale.Tr "admin.notices.delete_all"}}</button>
									</form>
									<div class="ui floating upward dropdown small button">{{/* TODO: Make this dropdown accessible */}}
										<span class="text">{{.locale.Tr "admin.notices.operations"}}</span>
										<div class="menu">
											<div class="item select action" data-action="select-all">
												{{.locale.Tr "admin.notices.select_all"}}
											</div>
											<div class="item select action" data-action="deselect-all">
												{{.locale.Tr "admin.notices.deselect_all"}}
											</div>
											<div class="item select action" data-action="inverse">
												{{.locale.Tr "admin.notices.inverse_selection"}}
											</div>
										</div>
									</div>
									<button class="ui small teal button" id="delete-selection" data-link="{{.Link}}/delete" data-redirect="{{.Link}}?page={{.Page.Paginater.Current}}">
										{{.locale.Tr "admin.notices.delete_selected"}}
									</button>
								</th>
							</tr>
					</tfoot>
				{{end}}
			</table>
		</div>

		{{template "base/paginate" .}}
	</div>
</div>

<div class="ui modal admin" id="detail-modal">
	{{svg "octicon-x" 16 "close inside"}}
	<div class="header">{{$.locale.Tr "admin.notices.view_detail_header"}}</div>
	<div class="content">
		<div class="sub header"></div>
		<pre></pre>
	</div>
</div>
{{template "base/footer" .}}