{% 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-success" 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 %}