{% include 'mcp_header.html' %}

<form method="post" id="mcp" class="iz-form" action="{{ U_POST_ACTION }}">
	<section class="iz-card iz-card--mcp" aria-labelledby="iz-mcp-notes-user-title">
		<header class="iz-card__header">
			<h2 class="iz-card__title" id="iz-mcp-notes-user-title">{{ L_TITLE }}</h2>
		</header>

		<div class="iz-card__body">
			<section class="iz-profile" aria-label="{{ L_TITLE }}">
				<div class="iz-profile__media" aria-hidden="true">
					{% if AVATAR_IMG %}
						<div class="iz-avatar iz-avatar--lg">{{ AVATAR_IMG }}</div>
					{% else %}
						<div class="iz-avatar iz-avatar--lg">
							<img src="{{ T_THEME_PATH }}/images/no_avatar.gif" alt="" />
						</div>
					{% endif %}
				</div>

				<div class="iz-profile__body">
					<h3 class="iz-profile__name">
						{% if USER_COLOR %}
							<span style="color: #{{ USER_COLOR }}">{{ USERNAME }}</span>
						{% else %}
							{{ USERNAME }}
						{% endif %}
					</h3>

					<ul class="iz-meta">
						<li>{{ L_JOINED }}{{ L_COLON }}&nbsp;{{ JOINED }}</li>
						<li>{{ L_TOTAL_POSTS }}{{ L_COLON }}&nbsp;{{ POSTS }}</li>
						<li>{{ L_WARNINGS }}{{ L_COLON }}&nbsp;{{ WARNINGS }}</li>
						{% if RANK_TITLE %}<li>{{ RANK_TITLE }}</li>{% endif %}
					</ul>
				</div>
			</section>
		</div>
	</section>

	<section class="iz-card iz-card--mcp" aria-labelledby="iz-mcp-add-feedback-title">
		<header class="iz-card__header">
			<h2 class="iz-card__title" id="iz-mcp-add-feedback-title">{{ L_ADD_FEEDBACK }}</h2>
		</header>

		<div class="iz-card__body">
			<div class="iz-field">
				<label class="iz-label" for="usernote">{{ L_ADD_FEEDBACK }}{{ L_COLON }}</label>
				<p class="iz-help">{{ L_ADD_FEEDBACK_EXPLAIN }}</p>
				<textarea class="iz-textarea"
						  placeholder="{{ L_ADD_FEEDBACK }}"
						  rows="2"
						  name="usernote"
						  id="usernote"></textarea>
			</div>

			<fieldset class="iz-actions">
				{{ S_HIDDEN_FIELDS }}
				<button type="submit" name="action[add_feedback]" value="{{ L_SUBMIT }}" class="iz-btn iz-btn--primary">{{ L_SUBMIT }}</button>
				{{ S_FORM_TOKEN }}
			</fieldset>
		</div>
	</section>

	<section class="iz-card iz-card--mcp" aria-labelledby="iz-mcp-notes-list-title">
		<header class="iz-card__header">
			<h2 class="iz-card__title" id="iz-mcp-notes-list-title">{{ L_NOTE }}</h2>
		</header>

		<div class="iz-card__body">
			<div class="iz-toolbar" role="region" aria-label="{{ L_SEARCH }}">
				<div class="iz-toolbar__left">
					<div class="iz-field iz-field--search">
						<label class="iz-label" for="search_keywords">{{ L_SEARCH_KEYWORDS }}{{ L_COLON }}</label>
						<div class="iz-field__row iz-field__row--actions">
							<input class="iz-input" type="text" name="keywords" id="search_keywords" placeholder="{{ L_SEARCH_KEYWORDS }}">
							<button type="submit" class="iz-btn iz-btn--primary">{{ L_SEARCH }}</button>
						</div>
					</div>
				</div>

				<div class="iz-toolbar__right">
					<nav class="iz-pagination" aria-label="{{ L_PAGINATION }}">
						<span class="iz-pagination__meta">{{ TOTAL_REPORTS }}</span>

						{% if pagination %}
							{% include 'pagination.html' %}
						{% else %}
							<span class="iz-pagination__current" aria-current="page">{{ PAGE_NUMBER }}</span>
						{% endif %}
					</nav>
				</div>
			</div>

			<div class="iz-table" role="region" aria-label="{{ L_NOTE }}">
				<table class="iz-table__table">
					<thead class="iz-table__head">
						<tr class="iz-table__row">
							<th scope="col" class="iz-table__th">{{ L_ACTION_NOTE }}</th>
							<th scope="col" class="iz-table__th iz-table__th--grow">{{ L_REPORT_BY }}</th>
							<th scope="col" class="iz-table__th">{{ L_IP }}</th>
							<th scope="col" class="iz-table__th">{{ L_TIME }}</th>
							{% if S_CLEAR_ALLOWED %}
								<th scope="col" class="iz-table__th iz-table__th--choice">{{ L_MARK }}</th>
							{% endif %}
						</tr>
					</thead>

					<tbody class="iz-table__body">
						{% for usernotes in usernotes %}
						<tr class="iz-table__row">
							<td class="iz-table__td">{{ usernotes.ACTION }}</td>
							<td class="iz-table__td">{{ usernotes.REPORT_BY }}</td>
							<td class="iz-table__td">{{ usernotes.IP }}</td>
							<td class="iz-table__td"><time>{{ usernotes.REPORT_AT }}</time></td>
							{% if S_CLEAR_ALLOWED %}
								<td class="iz-table__td iz-table__td--choice">
									<label class="iz-choice" for="note-{{ usernotes.ID }}">
										<input class="iz-choice__input" type="checkbox" name="marknote[]" id="note-{{ usernotes.ID }}" value="{{ usernotes.ID }}">
										<span class="iz-choice__label">{{ L_MARK }}</span>
									</label>
								</td>
							{% endif %}
						</tr>
						<!-- BEGINELSE -->
						<tr class="iz-table__row">
							<td class="iz-table__td" colspan="{% if S_CLEAR_ALLOWED %}5{% else %}4{% endif %}">{{ L_NO_ENTRIES }}</td>
						</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>

			<div class="iz-toolbar" role="region" aria-label="{{ L_OPTIONS }}">
				{% if S_CLEAR_ALLOWED %}
					<div class="iz-toolbar__left">
						<fieldset class="iz-actions iz-actions--inline">
							<button class="iz-btn iz-btn--danger" type="submit" name="action[del_all]" title="{{ L_DELETE_ALL }}">
								{{ L_DELETE_ALL }}
							</button>
							<button class="iz-btn iz-btn--danger" type="submit" name="action[del_marked]" title="{{ L_DELETE_MARKED }}">
								{{ L_DELETE_MARKED }}
							</button>

							<button class="iz-btn iz-btn--secondary" type="button"
									onclick="marklist('mcp', 'marknote', true); return false;"
									title="{{ L_MARK_ALL }}">
								{{ L_MARK_ALL }}
							</button>
							<button class="iz-btn iz-btn--secondary" type="button"
									onclick="marklist('mcp', 'marknote', false); return false;"
									title="{{ L_UNMARK_ALL }}">
								{{ L_UNMARK_ALL }}
							</button>
						</fieldset>
					</div>
				{% endif %}

				<div class="iz-toolbar__right">
					<nav class="iz-pagination" aria-label="{{ L_PAGINATION }}">
						<span class="iz-pagination__meta">{{ TOTAL_REPORTS }}</span>

						{% if pagination %}
							{% include 'pagination.html' %}
						{% else %}
							<span class="iz-pagination__current" aria-current="page">{{ PAGE_NUMBER }}</span>
						{% endif %}
					</nav>
				</div>
			</div>

			{% include 'display_options.html' %}
		</div>
	</section>
</form>

{% include 'mcp_footer.html' %}