{% extends 'base.html.twig' %}
{% block body %}
	<div class="app-inner-layout chat-layout">
		<div class="app-inner-layout__header text-white bg-premium-dark">
			<div class="app-page-title">
				<div class="page-title-wrapper">
					<div class="page-title-heading">
						<div class="page-title-icon bg-happy-fisher">
							<i class="pe-7s-umbrella text-white"></i>
						</div>
						<div>
							FAQ Section
							<div class="page-title-subheading">Dummy page layout example.</div>
						</div>
					</div>
					<div class="page-title-actions">
						<button type="button" id="Tooltip-123" class="btn-pill me-3 btn btn-success">
							<i class="fa fa-battery-three-quarters"></i>
						</button>
						<button class="ladda-button btn btn-pill btn-wide btn-alternate">Button</button>
					</div>
				</div>
			</div>
		</div>
		<div class="app-inner-layout__wrapper row-fluid g-0">
			<div class="app-inner-layout__sidebar bg-transparent card">
				<div class="p-3">
					<div class="dropdown-menu nav p-0 dropdown-menu-inline dropdown-menu-rounded dropdown-menu-hover-primary">
						<a href="#tab-faq-1" data-bs-toggle="tab" tabindex="0" class="mb-1 active dropdown-item">
							Invitation externe
						</a>
						<a href="#tab-faq-2" data-bs-toggle="tab" tabindex="0" class="mb-1 dropdown-item">
							Invitation interne
						</a>
					</div>
				</div>
			</div>
			<div class="col-md-12 app-inner-layout__content card">
				<div class="pb-5 ps-5 pe-5 pt-3">
					<div class="mobile-app-menu-btn mb-3">
						<button type="button" class="hamburger hamburger--elastic">
							<span class="hamburger-box">
								<span class="hamburger-inner"></span>
							</span>
						</button>
					</div>
					<div class="tab-content">
						<div class="tab-pane active show" id="tab-faq-1">

							<div class="position-relative mb-3">
								<label for="exampleEmail" class="form-label">Email</label>
								<input name="email" id="exampleEmail" placeholder="Email" type="email" class="form-control text-lowercase">
							</div>

							<div class="position-relative mb-3">
								<label for="exampleEmail" class="form-label">Titre</label>
								<input name="email" id="exampleEmail" placeholder="Titre" type="email" class="form-control text-lowercase">
							</div>

							<div class="position-relative mb-3">
								<label for="exampleText" class="form-label">Message</label>
								<textarea name="text" id="exampleText" class="form-control" rows="8"></textarea>
							</div>

							<div class="mt-5"></div>
							<div class="clearfix">
								<div class="text-center">
									<a href="javascript:void(0);" class="btn-pill btn-wide btn-shadow btn btn-primary btn-lg">Envoyer une invitation</a>
								</div>
							</div>
						</div>
						<div class="tab-pane" id="tab-faq-2">
							<div class="position-relative mb-3">
								<label for="name" class="form-label">Name</label>
								<input name="email" id="name" placeholder="name" type="email" class="form-control text-lowercase">
							</div>

							<div class="position-relative mb-3">
								<label for="exampleEmail" class="form-label">Titre</label>
								<input name="email" id="exampleEmail" placeholder="titre" type="email" class="form-control text-lowercase">
							</div>

							<div class="position-relative mb-3">
								<label for="exampleText" class="form-label">Message</label>
								<textarea name="text" id="exampleText" class="form-control" rows="8"></textarea>
							</div>
							<div class="mt-5"></div>
							<div class="clearfix">
								<div class="text-center">
									<a href="javascript:void(0);" class="btn-pill btn-wide btn-shadow btn btn-primary btn-lg">Envoyer une invitation</a>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}