{% extends "base.html" %}
{% load static %}
{% block content %}
  <div class="row">
    <div class="text-center my-2">
      <div class="row">
        <h1>
          <img class="mx-auto" src="{% static 'images/benchcoach.svg' %}" style="width: 2.5em;"/>
        </h1>
      </div>
      <div class="row">
        <h1><strong>Welcome to <span class="text-nowrap ">BenchCoach</span></strong></h1>
      </div>
      <div class="text-center lead fst-italic fw-light">
        An assistant coach for TeamSnap
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col text-center">
      {% if request.user.is_authenticated %}
        <a class="btn btn-outline-primary"
           href="{% url 'teamsnap_dashboard' %}"
        >
          Dashboard
        </a>
        <a class="btn btn-outline-primary"
           href="{% url 'teamsnap_schedule' %}"
        >
          Schedule
        </a>
      {% else %}
        <a class="btn btn-outline-primary"
           href="{% url 'account_login' %}"
        >
          Login
        </a>
      {% endif %}
    </div>
  </div>
  {% if not request.user.is_authenticated %}
  <div class="row mt-3">
    <h1>Features</h1>
    <hr/>
    <h3>Information at a glance</h3>
    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3">
      <div class="col">
        <div class="d-flex p-3">
          <div class="d-inline-block"><img src="{% static 'images/screenshots/5.jpg' %}" height="300"/></div>
          <div class="px-2">
            <h6 class="mb-0 mt-1">Sign in directly with TeamSnap</h6>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="d-flex p-3">
          <div class="d-inline-block"><img src="{% static 'images/screenshots/1.jpg' %}" height="300"/></div>
          <div class="px-2">
            <h6 class="mb-0 mt-1">See upcoming and past events, with availabilities, results, and quick links.</h6>
          </div>
        </div>
      </div>
    </div>
    <h3>Lineup Editor</h3>
    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3">
      <div class="col">
        <div class="d-flex p-3">
          <div class="d-inline-block"><img src="{% static 'images/screenshots/2.jpg' %}" height="300"/></div>
          <div class="px-2">
            <h6 class="mb-0 mt-1">Easy drag &amp; drop lineup editing</h6>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="d-flex p-3">
          <div class="d-inline-block"><img src="{% static 'images/screenshots/3.jpg' %}" height="300"/></div>
          <div class="px-2">
            <h6 class="mb-0 mt-1">Edit multiple lineups at once</h6>
          </div>
        </div>
      </div>
    </div>
    <h3>Share Lineups</h3>
    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3">
      <div class="col">
        <div class="d-flex p-3">
          <div class="d-inline-block"><img src="{% static 'images/screenshots/6.jpg' %}" height="300"/></div>
          <div class="px-2">
            <h6 class="mb-0 mt-1">Export lineups to TeamSnap and GameChanger</h6>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="d-flex p-3">
          <div class="d-inline-block"><img src="{% static 'images/screenshots/7.jpg' %}" height="300"/></div>
          <div class="px-2">
            <h6 class="mb-0 mt-1">Generate formatted lineup emails</h6>
          </div>
        </div>
      </div>
    </div>
    <h3>Share to Social Media</h3>
    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3">
      <div class="col">
        <div class="d-flex p-3">
          <div class="d-inline-block"><img src="{% static 'images/screenshots/4.jpg' %}" height="300"/></div>
          <div class="px-2">
            <h6 class="mb-0 mt-1">Customize social media with options</h6>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="d-flex p-3">
          <div class="d-inline-block"><img src="{% static 'images/screenshots/8.jpg' %}" height="300"/></div>
          <div class="px-2">
            <h6 class="mb-0 mt-1">Generate social media images</h6>
          </div>
        </div>
      </div>
    </div>
  </div>
  {% endif %}

{% endblock %}