rDrama/files/templates/award_modal.html

<script src="/static/assets/js/award_modal.js?a=3"></script>
<div class="modal fade" id="awardModal" tabindex="-1" role="dialog" aria-labelledby="awardModalTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered awardmodal" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Give Award</h5>
				<button role="button" class="close" data-bs-dismiss="modal" aria-label="Close">
					<span aria-hidden="true"><i class="far fa-times"></i></span>
				</button>
			</div>
			<div id="awardModalBody" class="modal-body">
				<form id="awardTarget" class="pt-3 pb-0" action="" method="post">
					<input autocomplete="off" type="hidden" name="formkey", value="{{v.formkey}}">
					<div class="card-columns award-columns awards-wrapper">
						{% for award in v.user_awards %}
							{% if award.owned %}
								<a role="button" id="{{award.kind}}" class="card" onclick="bruh('{{award.kind}}')">
							{% else %}
								<a role="button" id="{{award.kind}}" class="card disabled">
							{% endif %}
								<i class="{{award.icon}} {{award.color}}"></i>
								<div class="pt-2" style="font-weight: bold; font-size: 14px; color:#E1E1E1">{{award.title}}</div>
								<div class="text-muted">{{award.owned}} owned</div>
							</a>
						{% endfor %}
					</div>
					<label id="notelabel" for="note" class="pt-4">Note (optional):</label>
					<input autocomplete="off" id="kind" name="kind" value="" hidden>
					<textarea autocomplete="off" id="note" maxlength="200" name="note" class="form-control" placeholder="Note to include in award notification..."></textarea>
					<input autocomplete="off" id="giveaward" class="btn btn-primary" style="float:right" type="submit" value="Give Award" disabled>
					<pre>


					</pre>
				</form>
			</div>
		</div>
	</div>
</div>

<style>
	.awards-wrapper input[type="radio"] {
		display: none;
	}

	.awards-wrapper a {
		cursor: pointer;
		padding: 15px !important;
		text-align: center;
		text-transform: none!important;
	}

	.awards-wrapper a i {
		font-size: 25px;
	}

	.awards-wrapper a.disabled {
		opacity: 0.6;
	}

	.awards-wrapper a:hover:not(.disabled), .awards-wrapper .picked {
		background-color: var(--primary)!important;
	}

	.awards-wrapper input[type="radio"]:checked+a {
		background-color: var(--primary)!important;
	}

	.award-columns {
		column-count: 1;
	}

	@media (min-width: 767.98px) {
		.award-columns {
			column-count: 7 !important;
		}
	}

	.awardmodal {
		max-width: 90% !important;
	}
</style>