{% extends "basebase.html" %}
{% block filters %}
  {% load rowerfilters %}
{% endblock %}

{% block meta %}
{% endblock %}
    
{% block body_top %}
    <style>
      .splash {
      background-color: transparent;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      min-height: 759px;
      min-width: 1024px;
      width: 100%;
      height: auto;
      }
      .container_12 {background-color: rgba(255,255,255,0.0);}
      .container_top {background-color: rgba(255,255,255,0.7);}
    </style>

    <div id="bgpic" class="splash">
    
    <div class="container_top">
{% endblock %}

{% block teams %}
          {% if user.is_authenticated and user|has_teams %}
          <div class="grid_1 alpha dropdown">
              <button class="grid_1 alpha button gray small dropbtn">
                Teams 
              </button>
              <div class="dropdown-content">
                <a class="button gray small" href="/rowers/me/teams/">Manage Teams</a>
                {% if user|is_manager %}
                <a class="button gray small" href="/rowers/workout/upload/team/">Upload Team Member Workout</a>
                {% endif %}
            {% for t in user|user_teams %}
            <a class="button gray small" href="/rowers/list-workouts/team/{{ t.id }}/">{{ t.name }}</a>
            {% endfor %}
              </div>
            </div>
          <span class="tooltiptext">See recent workouts for your team</span>
          {% elif user.is_authenticated and user.rower.team.all %}
          <div class="grid_1 alpha dropdown">
              <button class="grid_1 alpha button gray small dropbtn">
                Teams
              </button>
              <div class="dropdown-content">
            {% for t in user.rower.team.all %}
            <a class="button gray small" href="/rowers/list-workouts/team/{{ t.id }}/">{{ t.name }}</a>
            {% endfor %}
              </div>
            </div>
          <span class="tooltiptext">See recent workouts for your team</span>
          {% else %}
	  <p>&nbsp;</p>
	  {% endif %}
{% endblock %}

          {% block challenges %}
  <a class="button gray small" href="/rowers/virtualevents">Racing</a>
{% endblock %}


{% block body_bottom %}
      </div>
    <script type="text/javascript">
      var num = (Math.floor(Math.random()*4));

      var array = ['one', 'two', 'three', 'four'];


      var elem = document.getElementById('bgpic');
      console.log(elem);
      elem.classList.add(array[num]);

    </script>
{% endblock %}