{% extends "base.html" %}
{% block content %}
{% load static %}
<script src="{% static 'js/beta.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/beta.css' %}">


<div id="particles-js">
  <div class="first-content">
    <div class="title-content">
      <div class="container-main-title">
        <p class="main-title">Bubo<span style="color: #ff8400;">Test</span></p>
      </div>
      <div class="container-sub-title">
        <p class="sub-title">By Bubo</p>
      </div>

      <div class="form-title-content">
        <div class="form-title-text">
          <p class="email-text">Enter your email to access <br> to the free features.</p>
        </div>
        <form method="POST" action="/add_email_form/">
          {% csrf_token %}
          <input type="email" class="form-control input-email" id="first-form" aria-describedby="emailHelp"
            placeholder="Email" name="email-beta" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
            title="Please enter a correct email pattern" style="margin-bottom: 10px;">
          {% if messages %}
          {% for message in messages %}
          {% if message.level == 30 %}
          <div class="alert alert-warning alert-email">{{ message }}</div>
          {% endif %}
          {% if message.level == 25 %}
          <script type="text/javascript">
            var modal = document.getElementById("first-form");
            if (modal.style.display == 'block' || modal.style.display == '') {
              modal.style.display = 'none';
            }
          </script>
          <div class="alert alert-success alert-email">{{ message }}</div>
          {% endif %}

          {% endfor %}
          {% endif %}
          <button type="submit" class="btn btn-primary btn-form-title">Get it</button>
        </form>
      </div>
    </div>
  </div>
</div>



<script src="{% static 'js/particles.js' %}"></script>
<script src="{% static 'js/app.js' %}"></script>

<div class="content">
  <div class="title-second-content">
    <img src="{% static 'img/whatdou.png' %}" class="title-second-content-img">
  </div>
  <div class="second-content">
    <div class="container-feature">
      <div class="first-feature">
        <div class="card border-orange mb-3 beta-card">
          <div class="card-header-orange">Predictions</div>
          <div class="card-body">
            <div class="card-title-orange">Over thousand of <br> matchs</div>
            <p class="card-text-orange">Get the latest predictions and statistics on every match which will be played
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="container-feature">
      <div class="second-feature">
        <div class="card border-orange-light mb-3 beta-card">
          <div class="card-header-orange">Search</div>
          <div class="card-body">
            <div class="card-title-orange light">Every details about players and tournament</div>
            <p class="card-text-orange light">Enjoy a wide directory of data about professional players and tournament
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    .first-feature {
      width: 100%;
      background: url("{% static 'img/img-first-feature.png' %}") no-repeat center;
      -webkit-background-size: cover;
      /*background-size: cover;*/
      padding-top: 3%;
      padding-bottom: 2%;
      margin-bottom: 5%;
    }

    .second-feature {
      width: 100%;
      background: url("{% static 'img/img-first-feature-beta.png' %}") no-repeat center;
      -webkit-background-size: cover;
      background-size: cover;
      padding-top: 3%;
      padding-bottom: 2%;
    }
  </style>


</div>
{% endblock %}