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

{% block title %}Nouvel abonnement
{% endblock %}

{% block body %}

	<div class="container position-relative align-items-center">
		<div class="row">
			<div class="col-md-4">
				<h1>Nouvel abonnement</h1>

				{{ form_start(form) }}
				<div class="row">
					<div class="col-6">
						<div>
							Type de tarif
							{{ form_widget(form.tarif) }}
						</div>
					</div>
					<div class="col-6">
						<div>
							Montant à payer
							{# <div class="fw-bold fs-3" id="montant">{{ currentAbonnement.tarif.amount }}</div> #}
							<div class="fw-bold fs-3">
								<span id="form_amount">{{ initAmount|number_format(0, ',', '.') }}</span>&nbsp;{{ currency }}/an
							</div>
							{# {{ form_row(form.amount,{'attr': {'class': 'form-control fw-bold fs-3','disabled': true}}) }} #}
						</div>
					</div>
				</div>
				<br>
				Téléphone
				<div class="input-group">
					<div id="prefixPhone">
						<div class="input-group-text">+242</div>
					</div>
					<div id="phone">
						{{ form_widget(form.phone)}}
					</div>
					<div>
						<button class="btn btn-warning">{{ button_label|default('Payer via Mobile Money') }}</button>
						{# {{ form_row(form.send)}} #}
					</div>
				</div>
				{{ form_end(form) }}
				<br>
			</div>
			<div class="col-md-8">
				{% include "layouts/partials/_prices.html.twig" %}
			</div>
		</div>
	</div>
	<script src="{{ asset('assets/js/abomomo.js?id=1234') }}"></script>
{% endblock %}