package modalcomponent

templ ModalConfirmation(
	id string,
	modalTitle string,
	message string,
	btnClose templ.Component,
	datHeader []string,
	dataText []string,
	modalAction templ.Component) {
	<div
		class="modal fade"
		id={ id }
		tabindex="-1"
		aria-labelledby="exampleModalLabel"
		data-backdrop="static"
		aria-hidden="true"
	>
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content rounded-lg">
				<div class="modal-header border-bottom-0">
					<h6 class="modal-title text-black font-weight-bolder">
						{ modalTitle }
					</h6>
					@btnClose
				</div>
				<div class="modal-body border-bottom-0">
					<p>{ message }</p>
					<div class="card rounded-lg">
						<div class="card-body d-flex flex-row">
							<div class="d-flex flex-column">
								for _, v := range datHeader {
									<div class="mb-1 mt-1 text-disabled font-weight-bold mr-5">{ v }</div>
								}
							</div>
							<div class="d-flex flex-column ">
								for _, v := range dataText {
									<div class="mb-1 mt-1 font-weight-bold">
										{ v }
									</div>
								}
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer border-top-0">
					@modalAction
				</div>
			</div>
		</div>
	</div>
}
