{% extends 'base.html.twig' %}

{% block title %}{% trans %}add_page_title{% endtrans %}{% endblock %}

{% block content %}
	<div class="add page_content">
		<h2>{% trans %}add_page_title{% endtrans %}</h2>

		<p>{% trans %}add_page_description{% endtrans %}</p>

		<div class="columns">
			<div class="column col-4 col-md-12">
				<div class="card">
					<div class="card-header">
						<div class="card-title h5">{% trans %}add_section_isn_title{% endtrans %}</div>
						<div class="card-subtitle text-gray">{% trans %}add_section_isn_desc{% endtrans %}</div>
					</div>
					<div class="card-body">
						<form class="form-horizontal" action="{{ path('book_lookup') }}" method="get">
							<div class="form-group">
								<div class="col-12">
									<label class="form-label"
										   for="isn-id">{% trans %}book_id_header{% endtrans %}</label>
								</div>
								<div class="col-12">
									<input class="form-input" type="text" id="isn-id" name="id"
										   placeholder="{% trans %}book_id_header{% endtrans %}"/>
								</div>
							</div>
							<div class="form-group">
								<div class="col-12">
									<label class="form-label"
										   for="isn-isn">{% trans %}book_isn_header{% endtrans %}</label>
								</div>
								<div class="col-12">
									<input class="form-input" type="text" id="isn-isn" name="isn" required
										   placeholder="{% trans %}book_isn_description{% endtrans %}"/>
								</div>
							</div>
							<div class="form-group">
								<button class="btn btn-primary">{% trans %}add_action_add_isn{% endtrans %}</button>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="column col-4 col-md-12">
				<div class="card">
					<div class="card-header">
						<div class="card-title h5">{% trans %}add_section_search_title{% endtrans %}</div>
						<div class="card-subtitle text-gray">{% trans %}add_section_search_desc{% endtrans %}</div>
					</div>
					<div class="card-body">
						<form class="form-horizontal" action="{{ path('book_lookup') }}" method="get">
							{% for name, label in {id: 'book_id_header', title: 'book_title_header', author: 'book_author_header', publisher: 'book_publisher_header'} %}
								<div class="form-group">
									<div class="col-12">
										<label class="form-label" for="search-{{ name }}">{{ label|trans }}</label>
									</div>
									<div class="col-12">
										<input class="form-input" type="text" id="search-{{ name }}" name="{{ name }}"
											   placeholder="{{ label|trans }}"/>
									</div>
								</div>
							{% endfor %}
							<div class="form-group">
								<button class="btn btn-primary">{% trans %}add_action_add_search{% endtrans %}</button>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="column col-4 col-md-12">
				<div class="card">
					<div class="card-header">
						<div class="card-title h5">{% trans %}add_section_manual_title{% endtrans %}</div>
						<div class="card-subtitle text-gray">{% trans %}add_section_manual_desc{% endtrans %}</div>
					</div>
					<div class="card-body">
						<form class="form-horizontal" action="{{ path('book_new') }}" method="get">
							<div class="form-group">
								<div class="col-12">
									<label class="form-label"
										   for="manual-id">{% trans %}book_id_header{% endtrans %}</label>
								</div>
								<div class="col-12">
									<input class="form-input" type="text" id="manual-id" name="id"
										   placeholder="{% trans %}book_id_header{% endtrans %}"/>
								</div>
							</div>
							<div class="form-group">
								<button class="btn btn-primary">{% trans %}add_action_add_manual{% endtrans %}</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}