<form class="card">
	<div class="card-body">
		<h3 class="card-title">Payment Method</h3>
		<p class="card-subtitle mb-4">All transactions are secure and encrypted</p>

		<div class="mb-3">
			<label class="form-label">Name on Card</label>
			<input type="text" class="form-control" placeholder="John Doe">
		</div>

		<div class="row">
			<div class="col-8">
				<div class="mb-3">
					<label class="form-label">Card Number</label>
					<input type="text" class="form-control" placeholder="1234 5678 9012 3456">
					<small class="form-hint">Enter your 16-digit number.</small>
				</div>
			</div>
			<div class="col-4">
				<div class="mb-3">
					<label class="form-label">CVV</label>
					<input type="text" class="form-control" placeholder="123">
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-6">
				<div class="mb-3">
					<label class="form-label">Month</label>
					<select class="form-select">
						<option value="">MM</option>
						<option value="1">January</option>
						<option value="2">February</option>
						<option value="3">March</option>
						<option value="4">April</option>
						<option value="5">May</option>
						<option value="6">June</option>
						<option value="7">July</option>
						<option value="8">August</option>
						<option value="9">September</option>
						<option value="10">October</option>
						<option value="11">November</option>
						<option value="12">December</option>
					</select>
				</div>
			</div>
			<div class="col-6">
				<div class="mb-3">
					<label class="form-label">Year</label>
					<select class="form-select">
						<option value="">YYYY</option>
						<option value="2025">2025</option>
						<option value="2026">2026</option>
						<option value="2027">2027</option>
						<option value="2028">2028</option>
						<option value="2029">2029</option>
						<option value="2030">2030</option>
					</select>
				</div>
			</div>
		</div>

		<hr class="my-4" />

		<h3 class="card-title">Billing Address</h3>
		<p class="card-subtitle mb-4">The billing address associated with your payment method</p>

		<div class="mb-3">
			<label class="form-check">
				<input class="form-check-input" type="checkbox" checked>
				<span class="form-check-label">Same as shipping address</span>
			</label>
		</div>

		<hr class="my-4" />

		<div class="mb-3">
			<label class="form-label">Comments</label>
			<textarea class="form-control" rows="3" placeholder="Add any additional comments"></textarea>
		</div>

		<div class="mt-4">
         <div class="btn-list">
            {% include "ui/button.html" text="Submit" color="primary" %}
            {% include "ui/button.html" text="Cancel" %}
         </div>
		</div>
	</div>
</form>

