<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>XXX XXX</title>
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="XXX">

        <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
        <!-- Main navigation -->
        <header class="d-flex">
        <!-- Navbar -->
        <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar ">
          <div class="container">
            <a class="navbar-brand" href="#">XXX XXX</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
              <ul class="navbar-nav mr-auto smooth-scroll">
                <li class="nav-item">
                  <a class="nav-link" href="#home">Home
                    <span class="sr-only">(current)</span>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#usage" data-offset="90">Usage</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#features" data-offset="90">Features</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#about" data-offset="90">About</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link nav-icon" href="XXX/" data-offset="30"><i class="fa fa-XXX" aria-hidden="true"></i></a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <!-- Navbar -->
        <!-- Full Page Intro -->
        <div id="home" class="view rgba-gradient d-flex align-self-stretch justify-content-center align-items-center">
            <!-- Content -->
            <div class="container px-md-3 px-sm-0">
              <!--Grid row-->
              <form action="" method="post">
              <div class="row fadeIn main-options">
                <!--Grid column-->
                <div class="col-md-12 mb-4 white-text text-center fadeIn">
                  <h3 class="display-3 font-weight-bold white-text mb-0 pt-md-5 pt-5">XXX XXX</h3>
                  <hr class="hr-light my-4 w-75">
                  <h4 class="subtext-header mt-2 mb-4">Double-blind your repository in 5 min!</h4>
                  <input id="url_input" type="text" placeholder="Repository URL..." name="githubRepository" class="white_border" value="{{ repo.repository }}" >
                  or
                  <a href="XXX/login" class="white_border">Login to XXX</a>
                  or
                  <button id="edit-button" class="white_border">Edit your existing repository</button>
                </div>
                <!--Grid column-->
              </div>
              <div class="row add_form">
                    {% if not repo %}
                    <div class="col-md-12 mb-4 white-text fadeIn">
                    <div class="alert alert-danger" role="alert">
                        The repository has to be public, <a href="XXX/login">login to XXX</a> for private repositories!
                    </div>
                    </div>
                    {% endif %}
                    <div class="col-md-12 mb-4 white-text fadeIn">
                        <div class="form-group">
                            <label for="ignoredTerms">The text to remove from the repository will be replaced by XXX.</label>
                            <small id="ignoredTermsHelp" class="form-text text-muted">One term per line (case insensitive).</small>
                            <textarea class="form-control .form-control-lg" name="terms" id="ignoredTerms" rows="5">{{ repo.terms|join('\n') }}</textarea>
                        </div>
                        <div class="form-group">
                            <label for="expiration">Expiration options</label>
                            <select class="form-control" id="expiration" name="expiration">
                                <option value="never" {% if repo.expiration=="never" %} selected="selected"{% endif %}>Never</option>
                                <option value="redirect" {% if repo.expiration=="redirect" %} selected="selected"{% endif %}>Redirect to the XXX repository</option>
                                <option value="remove" {% if repo.expiration=="remove" %} selected="selected"{% endif %}>Remove anonymized repository</option>
                            </select>
                        </div>
                        <div class="form-group" id="expiration-date-form" style="display: none;">
                            <label for="date">Expiration date.</label>
                            <small class="form-text text-muted">When the XXX repository.</small>
                            <input class="form-control .form-control-lg" type="date" name="expiration_date" id="date" value="{% if repo.expiration_date %}{{ repo.expiration_date.date().isoformat() }}{% endif %}" />
                        </div>
                        <button id="submit" type="submit" class="white_border">Submit</button>`

                        <button id="delete" class="white_border" style="color: red;">Delete</button>`
                    </div>
              </div>
            </form>
            <form class="row edit_form" style="display: none;">
                <h2>Edit Anonymized Repository</h2>
                <div class="col-md-12 mb-4 white-text fadeIn">
                    <div class="form-group">
                        <label>Repository ID</label>
                        <input class="form-control .form-control-lg" type="text" name="id" id="id"/>
                    </div>
                    <div class="form-group">
                        <label>Repository URL</label>
                        <input class="form-control .form-control-lg" type="url" name="githubRepository" id="url" value=""/>
                    </div>
                    <button type="submit" class="white_border">Submit</button>
                    <button id="edit_cancel" type="submit" class="white_border">Cancel</button>`
                </div>
            </form>
              <!--Grid row-->
            </div>
            <!-- Content -->
        </div>
        <!-- Full Page Intro -->
      </header>
      <!-- Main navigation -->
      <!--Main Layout-->
      <main>
        <div class="container">
          <!--Grid row-->
          <div class="row py-5">
            <div class="col-md-12">
                <h2 id="usage">Usage</h2>
                <p class="card-text mb-auto">
                    <ol>
                        <li>
                            Fill the XXX repo URL
                        </li>
                        <li>
                            Complete the list of terms that will be anonymized.
                            <span class="text-muted">The anonymization of the content is done by replacing all occurrences of words in a list by "XXX".The word list typically contains the institution name, author names, logins, etc...</span>
                        </li>
                        <li>
                            Define if you want an expiration date for your anonymized repository.
                            You can keep it for ever, remove the repository after a specific date or redirect the user to the XXX repository.
                        </li>
                    </ol>
                    As result, a unique url is created with the content of your repository, for example, <a href="XXX/">XXX/</a>.
                </p>
            </div>
            <!--Grid column-->
            <div class="col-md-12">
                <h2 id="features">Features</h2>
            </div>
            <div class="col-md-6">
                <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
                    <div class="col p-4 d-flex flex-column position-static">
                        <h3 class="mb-0">Anonymized</h3>
                        <p class="card-text mb-auto">
                            XXX XXX Anonymizes the content of the repository but also hide the issues, pull-requests, history. This way you are sure that your repository stays anonymized.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
                    <div class="col p-4 d-flex flex-column position-static">
                        <h3 class="mb-0">Always up-to-date</h3>
                        <p class="card-text mb-auto">
                            XXX XXX follows to track of the changes on your repository and updates the XXX version automatically.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
                    <div class="col p-4 d-flex flex-column position-static">
                        <h3 class="mb-0">Fast</h3>
                        <p class="card-text mb-auto">
                            With XXX XXX, it requires only 5min to anonymize your repository. No more time lost to create a anonymized version of your repository.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
                    <div class="col p-4 d-flex flex-column position-static">
                        <h3 class="mb-0">Open-source</h3>
                        <p class="card-text mb-auto">
                            XXX XXX is open-source, you can easily deploy it for your conference and simplify the life of your authors.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <h2 id="about">Metrics</h2>
            </div>
            <div class="col-md-12">
                <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
                    <div class="col p-4 d-flex flex-column position-static">
                        <h3 class="mb-auto text-center">2609 Anonymized Repositories</h3>
                        <p class="card-text mb-auto">
                            <strong></strong>
                        </p>
                    </div>
                </div>
            </div>
            <!--Grid column-->
          </div>
          <!--Grid row-->
        </div>
      </main>
      <!--Main Layout-->
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="XXX"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="XXX"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="XXX"></script>
      <script>
      if ($("#url_input")[0].value != "") {
        $('.view').addClass('active')
      }
      $("#url_input").on('focus', e => {
        $('.view').addClass('active')
      })
      if ($("#expiration")[0].value =='never') {
        $("#expiration-date-form").hide();
      } else {
        $("#expiration-date-form").show();
      }
      $("#expiration").change(e => {
          value = e.currentTarget.value;
          if (value == 'never') {
            $("#expiration-date-form").hide();
          } else {
            $("#expiration-date-form").show();
          }
      })
      if ($(document).scrollTop() < 35) {
            $('.navbar').removeClass('top-nav-collapse')
        } else {
            $('.navbar').addClass('top-nav-collapse')
        }
      $(document).scroll(e => {
        if ($(document).scrollTop() < 35) {
            $('.navbar').removeClass('top-nav-collapse')
        } else {
            $('.navbar').addClass('top-nav-collapse')
        }
      })
      $('#edit_cancel').on('click', e=> {
          e.preventDefault();
          $(".edit_form").hide();
          $('.main-options').show();
          return false;
      })
      $('#delete').on('click', e => {
        e.preventDefault();
        if (confirm("Are you sure you want to delete the repository?")) {
          $('#expiration')[0].value = 'remove';
          var date = new Date();
          date.setDate(date.getDate() - 1);
          $('#date')[0].value = date.toISOString().split('T')[0];
          $('#submit').click();
        }
        return false;
      })
      $('#edit-button').on('click', e=> {
          e.preventDefault();
          $('.view').removeClass('active')
          $(".edit_form").show();
          $('.main-options').hide();
          $('#id').focus();
          return false;
      })
      </script>
    </body>
</html>