{% extends "/include/template.html" %}
{% block title %}VATSIM Fox — view detailed profile statistic{% endblock %}
{% block content %}
<div class="p-5 mb-4 bg-light rounded-3">
	<div class="container-fluid py-5">
		<h1 class="display-5 fw-bold">Enter your VATSIM CID</h1>
		<p class="col-md-8 fs-4">See your detailed profile statistic</p>
		<div class="d-flex" role="search">
			<input class="fox_input form-control me-2" type="number" placeholder="100000" aria-label="CID">
			<button class="fox_submit btn btn-outline-primary" type="submit">Search</button>
		</div>
		<p class="fox_message text-primary col-md-8 fs-4"></p>
	</div>
</div>

<div class="mb-4 row align-items-md-stretch">
	<div class="col-md-6">
    	<div class="h-100 p-5 text-bg-dark rounded-3">
    		<h2>About</h2>
    		<p>VATSIM Fox is an open-source project to make it easier for users to see their detailed profile statistic</p>
    	</div>
  	</div>

	<div class="col-md-6">
		<div class="h-100 p-5 bg-light border rounded-3">
			<h2>Open source project</h2>
			<p>This project is fully opened, so you can contribute in it if you want</p>
			
			<a href="https://github.com/uw935/vatsimfox">
				<button class="btn btn-outline-secondary" type="button">GitHub</button>
			</a>
		</div>
	</div>
</div>
{% endblock %}
{% block javascript_code %}
<script type="text/javascript">
    $(".fox_submit").click(function() {
        const INPUT_CID = $(".fox_input").val();

        if (INPUT_CID < 100000) {
			$(".fox_message").text("CID should be equal or more than 100000");
			return;
        }

        fetch("/api/request?request_string=members/" + INPUT_CID, {})
        .then(response => response.json()).then(result => {
            // Checking if user exist
            if (result.result == "not found" || result.detail == "Not Found") {
                $(".fox_message").text("User not found!");
                return;
            }
            
            // Redirecting user to view page
            window.location.replace("/" + INPUT_CID);
        });
    });
</script>
{% endblock %}