{% extends "layout.html" %}

{% block content %}
<div class="grid">
	<div class="grid__item desk--two-thirds">
		<main class="page-main">
			<article class="module">
				<h2>{{ options.package.name }}</h2>
				<div class="module__content">
					<form method="post">

						{% if options.package.chooseServer %}
						<div class="form__select-wrap">
							<select name="server" style="width:515px; height:40px; font-size:18px;">
								<option value="">Please choose which server to receive this package upon</option>
								{% for server in options.servers %}
								<option value="{{ server.id }}">{{ server.name }}</option>
								{% endfor %}
							</select>
						</div>
						{% endif %}

						{% if options.package.customPrice %}
						<div class="form__group">
							<input type="text" name="price" class="input--inline" style="width:400px;" placeholder="{{ lang("package.options.price.placeholder") }}">
							<span class="h3">{{ store.currency }}</span>
						</div>
						{% endif %}

						{% for variable in options.variables %}
						<div class="form__group">
							{% if variable.type == "dropdown" %}
							<div class="form__select-wrap">
								<select name="variables[{{ variable.id }}]">
									<option value="">{{ variable.description }}</option>
									{% for option in variable.options %}
									<option value="{{ option.id }}">
										{{ option.name }}
										{% if option.price > 0 %}
										(+{{ option.price|money }} {{ basket.currency }})
										{% endif %}
									</option>
									{% endfor %}
								</select>
							</div>
							{% else %}
							<input type="text" name="variables[{{ variable.id }}]" style="width:500px;" placeholder="{{ variable.description }}">
							{% endif %}
						</div>
						{% endfor %}

						<div class="group">
							<div class="pull-right"><input type="submit" value="{{ lang("button.continue") }}" name="submit" class="button"></div>
							<div class="pull-left"><a href="/category/{{ options.package.category }}" class="button button--secondary"><i class="fa fa-arrow-left"></i> {{ lang("button.back") }}</a></div>
						</div>
					</form>
				</div>
			</article>
		</main>
	</div>
	<div class="grid__item desk--one-third">
		<aside class="page-side">
			{{ modules|raw }}
		</aside>
	</div>
</div>
{% endblock %}