{% extends "admin/base.html" %}

{% block stylesheets %}
{% endblock %}

{% block content %}
<div id="team-info-edit-modal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h2 class="modal-action text-center w-100">Edit Team</h2>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body clearfix">
				{% include "admin/modals/teams/edit.html" %}
			</div>
		</div>
	</div>
</div>

<div id="team-captain-modal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h2 class="modal-action text-center w-100">Choose Captain</h2>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body clearfix">
				{% include "admin/modals/teams/captain.html" %}
			</div>
		</div>
	</div>
</div>

<div id="team-award-modal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h2 class="modal-action text-center w-100">Award Team Member</h2>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body clearfix">
				<div class="form-group">
					<label for="award-member-input">Member</label>
					<select class="form-control custom-select" id="award-member-input">
						<option value=""> -- </option>
						{% for member in members %}
						<option value="{{ member.id }}">{{ member.name }}</option>
						{% endfor %}
					</select>
				</div>
				{% include "admin/modals/awards/create.html" %}
			</div>
		</div>
	</div>
</div>

<div class="jumbotron">
	<div class="container">
		<h1 id="team-id" class="text-center">{{ team.name }}</h1>
		<div class="mb-2">
			{% if team.verified %}
				<span class="badge badge-success">verified</span>
			{% endif %}
			{% if team.hidden %}
				<span class="badge badge-danger">hidden</span>
			{% endif %}
			{% if team.banned %}
				<span class="badge badge-danger">banned</span>
			{% endif %}
		</div>

		{% if team.oauth_id %}
			<a href="https://majorleaguecyber.org/t/{{ team.name }}">
				<h3><span class="badge badge-primary">Official</span></h3>
			</a>
		{% endif %}

		{% if team.affiliation %}
			<h3 class="d-inline-block">
				<span class="badge badge-primary">{{ team.affiliation }}</span>
			</h3>
		{% endif %}
		{% if team.country %}
			<h3 class="d-inline-block">
				<span class="badge badge-primary">
					<i class="flag-{{ team.country.lower() }}"></i>
					{{ lookup_country_code(team.country) }}
				</span>
			</h3>
		{% endif %}

		<h2 class="text-center">{{ members | length }} members</h2>
		<h3 id="team-place" class="text-center">
			{% if place %}
				{{ place }}
				<small>place</small>
			{% endif %}
		</h3>
		<h3 id="team-score" class="text-center">
			{% if score %}
				{{ score }}
				<small>points</small>
			{% endif %}
		</h3>
		<div class="pt-3">
			<a class="edit-team">
				<i class="btn-fa fas fa-pencil-alt fa-2x px-2" data-toggle="tooltip" data-placement="top"
				   title="Edit Team"></i>
			</a>
			<a class="edit-captain">
				<i class="btn-fa fas fa-user-tag fa-2x px-2" data-toggle="tooltip" data-placement="top"
				   title="Choose Captain"></i>
			</a>
			<a class="award-team">
				<i class="btn-fa fas fa-trophy fa-2x px-2" data-toggle="tooltip" data-placement="top" title="Award Team Member"></i>
			</a>
			<a class="delete-team">
				<i class="btn-fa fas fa-trash-alt fa-2x px-2" data-toggle="tooltip" data-placement="top"
				   title="Delete Team"></i>
			</a>
		</div>
	</div>
</div>

<div class="container">
	<div class="row">
		{% if solves %}
			<div id="keys-pie-graph" class="col-md-6">
				<div class="text-center">
					<i class="fas fa-circle-notch fa-spin fa-3x fa-fw spinner"></i>
				</div>
			</div>
			<div id="categories-pie-graph" class="col-md-6">
				<div class="text-center">
					<i class="fas fa-circle-notch fa-spin fa-3x fa-fw spinner"></i>
				</div>
			</div>
			<div id="score-graph" class="col-md-12">
				<div class="text-center">
					<i class="fas fa-circle-notch fa-spin fa-3x fa-fw spinner"></i>
				</div>
			</div>
		{% else %}
			<h3 class="spinner-error text-center w-100">
				No solves yet
			</h3>
		{% endif %}
	</div>

	<div class="row pt-5">
		<div class="col-md-12">
			<table class="table table-striped">
				<h3 class="text-center">Team Members</h3>
				<thead>
				<tr>
					<td class="text-center"></td>
					<td class="text-center"><b>User Name</b></td>
					<td class="text-center"><b>E-Mail</b></td>
					<td class="text-center"></td>
				</tr>
				</thead>
				<tbody>
				{% for member in members %}
					<tr>
						<td class="text-center">
							{% if team.captain_id == member.id %}
								<span class="badge badge-primary">Captain</span>
							{% endif %}
						</td>
						<td class="text-left">
							<a href="{{ url_for('admin.users_detail', user_id=member.id) }}">
								{{ member.name }}
							</a>
						</td>
						<td class="text-center">
							<a href="mailto:{{ member.email }}" target="_blank">
								{{ member.email }}
							</a>
						</td>
						<td class="text-center">
							<span class="delete-member cursor-pointer" member-id="{{ member.id }}"
								  member-name="{{ member.name }}" data-toggle="tooltip"
								  data-placement="top" title="Remove {{ member.name }}">
								<i class="fas fa-times"></i>
							</span>
						</td>
					</tr>
				{% endfor %}
				</tbody>
			</table>
		</div>
	</div>

	<nav class="nav nav-tabs nav-fill pt-5" id="myTab" role="tablist">
		<a class="nav-item nav-link active" id="nav-solves-tab" data-toggle="tab" href="#nav-solves" role="tab"
		   aria-controls="nav-solves" aria-selected="true">Solves</a>

		<a class="nav-item nav-link" id="nav-wrong-tab" data-toggle="tab" href="#nav-wrong" role="tab"
		   aria-controls="nav-wrong" aria-selected="false">Fails</a>

		<a class="nav-item nav-link" id="nav-awards-tab" data-toggle="tab" href="#nav-awards" role="tab"
		   aria-controls="nav-awards" aria-selected="false">Awards</a>
	</nav>

	<div class="tab-content" id="nav-tabContent">
		<div class="tab-pane fade show active" id="nav-solves" role="tabpanel" aria-labelledby="nav-solves-tab">
			<div class="row">
				<div class="col-md-12">
					<table class="table table-striped">
					<h3 class="text-center py-3 d-block">Solves</h3>
					<thead>
					<tr>
						<td class="text-center"><b>Challenge</b></td>
						<td class="text-center"><b>User</b></td>
						<td class="text-center"><b>Submitted</b></td>
						<td class="text-center"><b>Category</b></td>
						<td class="text-center"><b>Value</b></td>
						<td class="text-center"><b>Time</b></td>
						<td class="text-center"><b>Delete</b></td>
					</tr>
					</thead>
					<tbody>
					{% for solve in solves %}
						<tr class="chal-solve">
							<td class="text-center chal" id="{{ solve.challenge_id }}">
								<a href="{{ url_for("admin.challenges_detail", challenge_id=solve.challenge_id) }}">
									{{ solve.challenge.name }}
								</a>
							</td>
							<td class="text-center">
								<a href="{{ url_for("admin.users_detail", user_id=solve.user_id) }}">
									{{ solve.user.name }}
								</a>
							</td>
							<td class="flag" id="{{ solve.id }}"><pre>{{ solve.provided }}</pre></td>
							<td class="text-center">{{ solve.challenge.category }}</td>
							<td class="text-center">{{ solve.challenge.value }}</td>
							<td class="text-center solve-time">
								<span data-time="{{ solve.date | isoformat }}"></span>
							</td>
							<td class="text-center">
								<span class="delete-submission" submission-id="{{ solve.id }}"
									  submission-type="{{ solve.type }}"
									  submission-challenge="{{ solve.challenge.name }}" data-toggle="tooltip"
									  data-placement="top" title="Delete solve #{{ solve.id }}">
									<i class="fas fa-times"></i>
								</span>
							</td>
						</tr>
					{% endfor %}
					</tbody>
				</table>
				</div>
			</div>
		</div>

		<div class="tab-pane fade" id="nav-wrong" role="tabpanel" aria-labelledby="nav-wrong-tab">
			<div class="row">
				<div class="col-md-12">
					<table class="table table-striped">
					<h3 class="text-center py-3 d-block">Fails</h3>
					<thead>
					<tr>
						<td class="text-center"><b>Challenge</b></td>
						<td class="text-center"><b>User</b></td>
						<td class="text-center"><b>Submitted</b></td>
						<td class="text-center"><b>Time</b></td>
						<td class="text-center"><b>Delete</b></td>
					</tr>
					</thead>
					<tbody>
					{% for fail in fails %}
						<tr class="chal-wrong">
							<td class="text-center chal" id="{{ fail.challenge_id }}">
								<a href="{{ url_for("admin.challenges_detail", challenge_id=fail.challenge_id) }}">
									{{ fail.challenge.name }}
								</a>
							</td>
							<td class="text-center">
								<a href="{{ url_for("admin.users_detail", user_id=fail.user_id) }}">
									{{ fail.user.name }}
								</a>
							</td>
							<td class="flag" id="{{ fail.id }}"><pre>{{ fail.provided }}</pre></td>
							<td class="text-center solve-time">
								<span data-time="{{ fail.date | isoformat }}"></span>
							</td>
							<td class="text-center">
								<span class="delete-submission" submission-id="{{ fail.id }}"
									  submission-type="{{ fail.type }}"
									  submission-challenge="{{ fail.challenge.name }}" data-toggle="tooltip"
									  data-placement="top" title="Delete fail #{{ fail.id }}">
									<i class="fas fa-times"></i>
								</span>
							</td>
						</tr>
					{% endfor %}
					</tbody>
				</table>
				</div>
			</div>
		</div>

		<div class="tab-pane fade" id="nav-awards" role="tabpanel" aria-labelledby="nav-awards-tab">
			<div class="row">
				<div class="col-md-12">
					<table class="table table-striped">
						<h3 class="text-center py-3 d-block">Awards</h3>
						<thead>
						<tr>
							<td class="text-center"><b>Name</b></td>
							<td class="text-center"><b>User</b></td>
							<td class="text-center"><b>Description</b></td>
							<td class="text-center"><b>Date</b></td>
							<td class="text-center"><b>Value</b></td>
							<td class="text-center"><b>Category</b></td>
							<td class="text-center"><b>Icon</b></td>
							<td class="text-center"><b>Delete</b></td>
						</tr>
						</thead>
						<tbody id="awards-body">
						{% for award in awards %}
							<tr class="award-row">
								<td class="text-center chal" id="{{ award.id }}">{{ award.name }}</td>
								<td class="text-center">
									<a href="{{ url_for("admin.users_detail", user_id=award.user_id) }}">
										{{ award.user.name }}
									</a>
								</td>
								<td class=""><pre>{{ award.description }}</pre></td>
								<td class="text-center solve-time">
									<span data-time="{{ award.date | isoformat }}"></span>
								</td>
								<td class="text-center">{{ award.value }}</td>
								<td class="text-center">{{ award.category }}</td>
								<td class="text-center">{{ award.icon }}</td>

								<td class="text-center">
									<span class="delete-award" award-id="{{ award.id }}" award-name="{{ award.name }}"
										  data-toggle="tooltip" data-placement="top" title="Delete award #{{ award.id }}">
										<i class="fas fa-times"></i>
									</span>
								</td>
							</tr>
						{% endfor %}
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<div class="row pt-5">
		<div class="col-md-12">
			<table class="table table-striped">
				<h3 class="text-center">IP Addresses</h3>
				<thead>
				<tr>
					<td class="text-center"><b>User</b></td>
					<td class="text-center"><b>IP Address</b></td>
					<td class="text-center"><b>Last Seen</b></td>
				</tr>
				</thead>
				<tbody>
				{% for addr in addrs %}
					<tr>
						<td class="text-center">
							<a href="{{ url_for("admin.users_detail", user_id=addr.user_id) }}">
								{{ addr.user.name }}
							</a>
						</td>
						<td class="text-center">{{ addr.ip }}</td>
						<td class="text-center solve-time">
							<span data-time="{{ addr.date | isoformat }}"></span>
						</td>
					</tr>
				{% endfor %}
				</tbody>
			</table>
		</div>
	</div>

</div>

{% endblock %}

{% block scripts %}
<script>
	var TEAM_ID = {{ team.id }};
	var TEAM_NAME = {{ team.name | tojson }};
	var stats_data = {{ {
		'type': 'team',
		'id': team.id,
		'name': team.name,
		'account_id': team.id,
	} | tojson }};
</script>
<script defer src="{{ url_for('views.themes', theme='admin', path='js/plotly.bundle.js') }}"></script>
<script defer src="{{ url_for('views.themes', theme='admin', path='js/graphs.js') }}"></script>
{% endblock %}

{% block entrypoint %}
	<script defer src="{{ url_for('views.themes', theme='admin', path='js/pages/team.js') }}"></script>
{% endblock %}