<!DOCTYPE html>
<html lang="{{ app.locale }}">
<head>
	<title>{% trans %}general_app_name{% endtrans %} - {% trans %}inventory_page_title{% endtrans %}</title>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<link rel="stylesheet" href="{{ asset('css/spectre/spectre.min.css') }}"/>
	<link rel="stylesheet" href="{{ asset('css/inventory.css') }}"/>
</head>
<body>
<header class="navbar">
	<section class="navbar-section">
		<a href="{{ path('home') }}" class="navbar-brand mr-2">{% trans %}general_app_name{% endtrans %}</a>
		<span class="text-gray">{% trans %}inventory_page_title{% endtrans %}</span>
	</section>
	<section class="navbar-section">
		<span id="connection" class="label label-rounded"></span>
	</section>
</header>

<main id="inventory"
	  data-books-url="{{ path('inventory_books') }}"
	  data-sync-url="{{ path('inventory_sync') }}"
	  data-sw-url="{{ path('inventory_service_worker') }}"
	  data-scope="{{ path('inventory') }}"
	  data-book-url="{{ path('book_show', {id: 0})|replace({'/0': '/{id}'}) }}"
	  data-locale="{{ app.locale }}">

	<form id="scan-form" class="scan-form" autocomplete="off">
		<div class="input-group">
			<input id="scan-input" class="form-input input-lg" type="text" inputmode="text" autofocus
				   placeholder="{% trans %}inventory_input_placeholder{% endtrans %}"
				   aria-label="{% trans %}inventory_input_placeholder{% endtrans %}"/>
			<button class="btn btn-primary btn-lg input-group-btn">{% trans %}inventory_action_enter{% endtrans %}</button>
		</div>
		<p class="form-input-hint">{% trans %}inventory_input_hint{% endtrans %}</p>
	</form>

	<div class="current-location">
		<span class="text-gray">{% trans %}inventory_current_location{% endtrans %}</span>
		<strong id="location">–</strong>
	</div>

	<div id="message" class="toast message" hidden></div>

	<div class="status columns">
		<div class="column col-6 col-sm-12">
			{% trans %}inventory_books_count{% endtrans %} <strong id="books-count">0</strong>
			<small class="text-gray" id="books-date"></small>
			<button id="refresh" type="button" class="btn btn-sm">{% trans %}inventory_action_refresh{% endtrans %}</button>
		</div>
		<div class="column col-6 col-sm-12">
			{% trans %}inventory_pending_count{% endtrans %} <strong id="pending-count">0</strong>
			<small class="text-gray" id="sync-date"></small>
			<button id="sync" type="button" class="btn btn-sm btn-primary">{% trans %}inventory_action_sync{% endtrans %}</button>
		</div>
	</div>

	<h5>{% trans %}inventory_log_title{% endtrans %}</h5>
	<p id="log-empty" class="text-gray">{% trans %}inventory_log_empty{% endtrans %}</p>
	<table class="table table-striped log">
		<tbody id="log"></tbody>
	</table>
	<button id="clear-log" type="button" class="btn btn-link btn-sm" hidden>{% trans %}inventory_action_clear_log{% endtrans %}</button>
</main>

<script type="application/json" id="messages">{{ {
	location_set: 'inventory_msg_location_set'|trans,
	no_location: 'inventory_msg_no_location'|trans,
	assigned: 'inventory_msg_assigned'|trans,
	moved: 'inventory_msg_moved'|trans,
	unknown_id: 'inventory_msg_unknown_id'|trans,
	unknown_number: 'inventory_msg_unknown_number'|trans,
	ambiguous_number: 'inventory_msg_ambiguous_number'|trans,
	unrecognized: 'inventory_msg_unrecognized'|trans,
	no_books: 'inventory_msg_no_books'|trans,
	books_loaded: 'inventory_msg_books_loaded'|trans,
	books_failed: 'inventory_msg_books_failed'|trans,
	synced: 'inventory_msg_synced'|trans,
	sync_failed: 'inventory_msg_sync_failed'|trans,
	sync_rejected: 'inventory_msg_sync_rejected'|trans,
	online: 'inventory_online'|trans,
	offline: 'inventory_offline'|trans,
	never: 'inventory_never'|trans,
	status_pending: 'inventory_status_pending'|trans,
	status_saved: 'inventory_status_saved'|trans,
	status_returned: 'inventory_status_returned'|trans,
	will_return: 'inventory_msg_will_return'|trans,
	status_unknown_book: 'inventory_status_unknown_book'|trans,
	status_invalid: 'inventory_status_invalid'|trans,
	remove: 'inventory_action_remove'|trans,
	confirm_clear: 'inventory_confirm_clear'|trans,
}|json_encode(constant('JSON_PRETTY_PRINT') b-or constant('JSON_HEX_TAG') b-or constant('JSON_UNESCAPED_UNICODE'))|raw }}</script>
<script src="{{ asset('js/inventory.js') }}"></script>
</body>
</html>
