{% include 'overall_header.html' %}

<script>
// The following javascript is derived from phpMyAdmin's methods

// This array is used to remember mark status of rows in browse mode
var markedRow = [];

/**
* enables highlight and marking of rows in data tables
*/
function markRowsInit() {
	// for every table row ...
	var rows = document.getElementsByTagName('tr');
	for (var i = 0; i < rows.length; i++) {
		// ... with the class 'row1' or 'row2' ...
		if ('row1' !== rows[i].className.substr(0, 4) && 'row2' !== rows[i].className.substr(0, 4)) {
			continue;
		}
		// ... add event listeners ...
		// ... to highlight the row on mouseover ...
		rows[i].onmouseover = function() {
			this.className += ' row3';
		};
		rows[i].onmouseout = function() {
			this.className = this.className.replace(' row3', '');
		};
		// ... and to mark the row on click ...
		rows[i].onmousedown = function() {
			var uniqueId;
			var checkbox;

			checkbox = this.getElementsByTagName('input')[0];
			if (checkbox && checkbox.type === 'checkbox') {
				uniqueId = checkbox.name + checkbox.value;
			} else if (this.id.length > 0) {
				uniqueId = this.id;
			} else {
				return;
			}

			markedRow[uniqueId] = typeof(markedRow[uniqueId]) === 'undefined' || !markedRow[uniqueId];

			if (checkbox && checkbox.disabled === false) {
				checkbox.checked = markedRow[uniqueId];
			}
		};

		// .. and checkbox clicks
		var checkbox = rows[i].getElementsByTagName('input')[0];
		if (checkbox) {
			checkbox.onclick = function() {
				// opera does not recognize return false;
				this.checked = !this.checked;
			};
		}
	}
}

window.onload = markRowsInit;

/**
* We must use phpMyAdmin derived mark all, unmark all rows
* for compatibility with the table row clicking function above
*/
function markAllRows(containerId, overhead) {
	var rows = (!overhead) ? document.getElementById(containerId).getElementsByTagName('tr') : document.getElementById(containerId).getElementsByClassName('overhead');

	var uniqueId;
	var checkbox;

	for (var i = 0; i < rows.length; i++) {
		checkbox = rows[i].getElementsByTagName('input')[0];

		if (checkbox && checkbox.type === 'checkbox') {
			uniqueId = checkbox.name + checkbox.value;
			if (checkbox.disabled === false) {
				checkbox.checked = true;
				if (typeof(markedRow[uniqueId]) === 'undefined' || !markedRow[uniqueId]) {
					markedRow[uniqueId] = true;
				}
			}
		}
	}

	return true;
}

function unmarkAllRows(containerId) {
	var rows = document.getElementById(containerId).getElementsByTagName('tr');
	var uniqueId;
	var checkbox;

	for (var i = 0; i < rows.length; i++) {
		checkbox = rows[i].getElementsByTagName('input')[0];

		if (checkbox && checkbox.type === 'checkbox') {
			uniqueId = checkbox.name + checkbox.value;
			checkbox.checked = false;
			markedRow[uniqueId] = false;
		}
	}

	return true;
}
</script>

<a id="maincontent"></a>

<h1>{{ lang('ACP_OPTIMIZE_REPAIR') }}</h1>

<p>{{ lang('ACP_OPTIMIZE_REPAIR_EXPLAIN') }}</p>

<div class="errorbox">
	<h3>{{ lang('WARNING') }}</h3>
	<p>{{ lang('WARNING_EXPLAIN') }}</p>
</div>

<form id="tables" method="post" action="{{ U_ACTION }}">
	<fieldset>
		<legend>{{ lang('OPTIMIZE_REPAIR_OPTIONS') }}</legend>
		<dl>
			<dt><label for="disable_board">{{ lang('DISABLE_BOARD') ~ lang('COLON') }}</label><br /><span>{{ lang('DISABLE_BOARD_EXPLAIN') }}</span></dt>
			<dd>
				<label><input type="radio" class="radio" id="disable_board" name="disable_board" value="1" checked="checked" /> {{ lang('YES') }}</label>
				<label><input type="radio" class="radio" name="disable_board" value="0" /> {{ lang('NO') }}</label>
			</dd>
		</dl>
		<dl>
			<dt><label for="operation">{{ lang('ACTION') ~ lang('COLON') }}</label></dt>
			<dd>
				<label><input type="radio" class="radio" name="operation" value="optimize" id="operation" checked="checked" /> {{ lang('OPTIMIZE') }}</label>
				<label><input type="radio" class="radio" name="operation" value="repair" /> {{ lang('REPAIR') }}</label>
				<label><input type="radio" class="radio" name="operation" value="check" /> {{ lang('CHECK') }}</label>
			</dd>
		</dl>

		<table class="table1" id="table-data">
			<thead>
				<tr>
					<th>{{ lang('TH_NAME') }}</th>
					<th>{{ lang('TH_TYPE') }}</th>
					<th style="text-align:right;">{{ lang('TH_SIZE') }}</th>
					<th style="text-align:right;">{{ lang('TH_OVERHEAD') }}</th>
					<th style="text-align:center;">{{ lang('MARK') }}</th>
				</tr>
			</thead>
			<tbody>
				{% for table in TABLE_DATA %}
					{% if loop.index0 is even %}
						<tr class="row1{{ table.S_OVERHEAD ? ' overhead' }}">
					{% else %}
						<tr class="row2{{ table.S_OVERHEAD ? ' overhead' }}">
					{% endif %}
						<td>{{ table.TABLE_NAME }}</td>
						<td>{{ table.TABLE_TYPE }}</td>
						<td style="text-align:right;">{{ table.DATA_SIZE }}</td>
						<td style="text-align:right;">{{ table.DATA_FREE }}</td>
						<td style="text-align:center;">&nbsp;<input type="checkbox" class="radio" name="mark[]" value="{{ table.TABLE_NAME }}" />&nbsp;</td>
					</tr>
				{% else %}
					<tr><td colspan="5">{{ lang('TABLE_EMPTY') }}</td></tr>
				{% endfor %}
				<tr>
					<th>{{ lang('TH_TOTAL') }}</th>
					<th></th>
					<th style="text-align:right;">{{ TOTAL_DATA_SIZE }}</th>
					<th style="text-align:right;">{{ TOTAL_DATA_FREE }}</th>
					<th></th>
				</tr>
			</tbody>
		</table>

		<fieldset class="quick">
			<p class="small"><a href="#" onclick="markAllRows('table-data', false); return false;">{{ lang('MARK_ALL') }}</a> &bull; <a href="#" onclick="unmarkAllRows('table-data'); return false;">{{ lang('UNMARK_ALL') }}</a>{% if TOTAL_DATA_FREE != '0 B' %} &bull; <a href="#" onclick="unmarkAllRows('table-data'); markAllRows('table-data', true); return false;">{{ lang('MARK_OVERHEAD') }}</a>{% endif %}</p>
		</fieldset>

		<p id="buttons" class="submit-buttons">
			<input class="button1" type="submit" id="submit" name="submit" value="{{ lang('SUBMIT') }}" />&nbsp;
			<input class="button2" type="reset" id="reset" name="reset" value="{{ lang('RESET') }}" />
		</p>
		{{ S_FORM_TOKEN }}
	</fieldset>
</form>

{% include 'overall_footer.html' %}