<div class="card">
	<div class="card-body">
		<div class="mb-3">
			<div class="form-label">Card number</div>
			{% include ui/form/input-mask.html mask="0000 0000 0000 0000" visible=true %}
		</div>

		<div class="mb-3">
			<div class="form-label">Card name</div>
			<input type="text" class="form-control">
		</div>

		<div class="row">
			<div class="col-8">
				<div class="mb-3">
					<label class="form-label">Expiration date</label>
					<div class="row g-2">
						<div class="col">
							<select class="form-select">
								{% for month in (1..12) %}
								<option value="{{ month }}">{{ month }}</option>
								{% endfor %}
							</select>
						</div>
						<div class="col">
							<select class="form-select">
								{% for year in (2020..2030) %}
								<option value="{{ year }}">{{ year }}</option>
								{% endfor %}
							</select>
						</div>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="mb-3">
					<div class="form-label">CVV</div>
					<input type="number" class="form-control">
				</div>
			</div>
		</div>

		<div class="mt-2">
			{% include ui/button.html text="Pay now" color="primary" block=true  %}
		</div>
	</div>
</div>