<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>ATY CREW</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<main>
			<img src="assets/closebtn.png" class="close-btn" />
			<img src="assets/back.png" class="back-btn" />

			<div class="notify">
				<!--<div class="wrapper success">
					<div class="title"><i class="fa-solid fa-triangle-exclamation"></i> INFO</div>
					<div class="content">Der findes allerede et crew med det navn. Prøv et andet.</div>
				</div>-->
			</div>

			<div class="container">
				<div class="top">
					<div class="title">
						<span data-locale="Title1">QBCore</span>
						<p style="display: inline-block" data-locale="Title2">Crew System</p>
					</div>
					<div class="subtitle" data-locale="Subtitle">CREW SYTEM</div>
					<div class="custom-text" data-locale="Custom-Text">
						Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit molestias recusandae
						explicabo nemo corrupti tenetur veritatis sequi totam rerum quos!
					</div>
				</div>
				<div class="bottom">
					<div class="button" id="create-crew" data-locale="Create-Crew">Lav crew</div>
					<div class="button" id="invite" data-locale="Invite-Crew">Inviter til crew</div>
					<div class="button" id="player-list" data-locale="Crew-MemberList">Crew medlemmer</div>
					<div class="button" id="scoreboard" data-locale="Crew-Scoreboard">Crew scoreboard</div>
					<div class="button" id="leave" data-locale="Leave-Crew">Forlad crew</div>
					<div class="button" id="delete" data-locale="Delete-Crew">Slet crew</div>
				</div>

				<div class="create-crew">
					<div class="title" data-locale="Crew-CreateTitle">LAV CREW</div>
					<input
						type="text"
						class="input-crew"
						placeholder="Crew name..."
						minlength="4"
						maxlength="12"
						required
					/>
					<div class="create" data-locale="Crew-CreateButton">OPRET</div>
				</div>

				<div class="sec-bg"></div>

				<div class="invite-crew">
					<div class="title" data-locale="Crew-InviteRequestTitle">
						Hawk inviterede dig til "H*"-crewet
					</div>
					<div class="btn-wrapper">
						<div class="btn-cancel" data-target="join" data-locale="Crew-InviteRequestReject">Afvis</div>
						<div class="btn-accept" data-target="join" data-locale="Crew-InviteRequestAccept">Accepter</div>
					</div>
				</div>

				<div class="leave-crew">
					<div class="title" data-locale="Crew-LeaveTitle">Er du sikker på at du vil forlade crewet?</div>
					<div class="btn-wrapper">
						<div class="btn-cancel" data-locale="Crew-StayButton">Nej</div>
						<div class="btn-accept" data-target="leave" data-locale="Crew-LeaveButton">Ja</div>
					</div>
				</div>

				<div class="delete-crew">
					<div class="title" data-locale="Crew-DeleteTitle">Er du sikker på at du vil slette crewet?</div>
					<div class="btn-wrapper">
						<div class="btn-cancel" data-locale="Crew-DontDeleteButton">Nej</div>
						<div class="btn-accept" data-target="delete" data-locale="Crew-DeleteButton">Slet</div>
					</div>
				</div>

				<div class="invite-menu">
					<div class="title" data-locale="Crew-InviteTitle">Inviter til crew</div>
					<div class="players">
						<!-- <div class="player-wrapper">
							<div class="image"><img src="assets/invite-image.png" class="invite-image" /></div>
							<div class="name">Hawk</div>
							<div class="id"><span>255</span>ID</div>
						</div> -->
					</div>
				</div>
			</div>

			<div class="crew-members">
				<div class="main-div">
					<table>
						<thead>
							<tr>
								<th>
									<span data-locale="Crew-NameTitle">Navn</span>
									<i class="fa-solid fa-sort-down"></i>
								</th>
								<th>
									<span data-locale="Crew-RankTitle">Rang</span>
									<i class="fa-solid fa-sort-down"></i>
								</th>
								<th>
									<span data-locale="Crew-Actions" class="only-leader">Handlinger</span>
								</th>
								<th>
									<span data-locale="Crew-KillsTitle">Mord</span>
									<i class="fa-solid fa-sort-down"></i>
								</th>
								<th>
									<span data-locale="Crew-DeathsTitle">Døde</span>
									<i class="fa-solid fa-sort-down"></i>
								</th>
							</tr>
						</thead>
						<tbody id="member-list">
							<tr>
								<!-- <td><img src="assets/invite-image.png" />Hawk</td>
								<td><span>Nye medlemmer</span></td>
								<td><img src="assets/down.png" /><img src="assets/up.png" /><img src="assets/kick.png" /></td>
								<td>0</td>
								<td>0</td> -->
							</tr>
						</tbody>
					</table>
				</div>
			</div>

			<div class="crew-list">
				<div class="main-div">
					<table>
						<thead>
							<tr>
								<th>
									<span data-locale="Crew-ScoreboardRank">Rang</span>
									<i class="fa-solid fa-sort-down"></i>
								</th>
								<th>
									<span data-locale="Crew-ScoreboardName">Crew-navn</span>
									<i class="fa-solid fa-sort-down"></i>
								</th>
								<th>
									<span data-locale="Crew-ScoreboardDate">Est.</span>
									<i class="fa-solid fa-sort-down"></i>
								</th>
								<th>
									<span data-locale="Crew-ScoreboardMembers">Medlemmer</span>
									<i class="fa-solid fa-sort-down"></i>
								</th>
								<th>
									<span data-locale="Crew-ScoreboardKills">Mord</span>
									<i class="fa-solid fa-sort-down"></i>
								</th>
							</tr>
						</thead>
						<tbody id="crew-list">
							<!--<tr>
								<td>1</td>
								<td>atiysu</td>
								<td>03/23/23</td>
								<td>20</td>
								<td>20</td>
							</tr>
							<tr>
								<td>1</td>
								<td>atiysu</td>
								<td>03/23/23</td>
								<td>20</td>
								<td>20</td>
							</tr>

							<tr class="your-crew">
								<td>1</td>
								<td>atiysu</td>
								<td>03/23/23</td>
								<td>20</td>
								<td>20</td>
							</tr>-->
						</tbody>
					</table>
				</div>
			</div>
		</main>

		<div class="bg">
			<img src="assets/bg.png" class="background" />
		</div>

		<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js"></script>
		<script src="js/utils.js"></script>
		<script src="js/main.js"></script>
	</body>
</html>