{% extends 'base/base.html' %}
{% load static %}

{% block title %}Home{% endblock %}
{% block head %}
  <link rel="stylesheet" href="{% static "css/home/index.css" %}">
{% endblock %}

{% block content %}
  {% include "base/navbar.html" %}

  {% if messages %}
    <section class="section message-section is-centered">
      <div class="columns is-mobile is-centered">
        <div class="column is-one-third-desktop is-full-tablet is-full-mobile">
          {% for message in messages %}
            <div class="notification {% if message.tags %}is-{{ message.tags }}{% endif %}">
              <button class="delete"></button>

              {{ message }}
            </div>
          {% endfor %}
        </div>
      </div>
    </section>
  {% endif %}

  <section class="section">

    {# Who are we? #}
    <div class="container is-spaced">
      <h1 class="is-size-1">Who are we?</h1>
      <br>
      <div class="columns">
        <div class="column is-half">
          <p>
            We're a large community focused around the Python programming language.
            We believe anyone can learn programming, and are very dedicated to helping
            novice developers take their first steps into the world of code. We also
            attract a lot of expert developers who are seeking friendships, collaborators,
            or looking to hone their craft by teaching and getting involved in the community.

            <br/><br/>

            We organise regular community events like code jams, open source hackathons,
            seasonal events and community challenges. Through our sponsorships and with
            help from donations, we are even able to award prizes to the winners of our events.

            <br/><br/>

            You can find help with most Python-related problems in one of our help channels.
            Our staff of nearly 50 dedicated expert Helpers are available around the clock
            in every timezone. Whether you're looking to learn the language or working on a
            complex project, we've got someone who can help you if you get stuck.
          </p>
        </div>

        {# Intro video #}
        <div class="column is-half video-container">
          <iframe src="https://www.youtube.com/embed/DIBXg8Qh7bA" frameborder="0"
                  allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
                  allowfullscreen></iframe>
        </div>
      </div>

      {# Projects #}
      <h1 class="is-size-1">Projects</h1>
      <br>
      <div class="columns is-multiline">

        {# Display projects from HomeView.repos #}
        {% for repo in repo_data %}
          <div class="column is-one-third">
            <div class="card has-equal-height github-card">
              <div class="card-content">
                <div class="repo-headline">
                  <i class="fab fa-github"></i>
                  <a href="https://github.com/{{ repo.repo_name }}"> <strong>{{ repo.repo_name }}</strong></a>
                </div>
                <div>
                  {{ repo.description }}
                  <br><br>
                  </span><span class="repo-language-dot {{ repo.language | lower }}"></span> {{ repo.language }}
                  <span id="repo-footer-item"><i class="fas fa-star"></i> {{ repo.stargazers }}</span>
                  <span id="repo-footer-item"><i class="fas fa-code-branch"></i> {{ repo.forks }}</span>
                </div>
              </div>
            </div>
          </div>
        {% endfor %}

      </div>
    </div>
  </section>

  {# Sponsors #}
  <section class="section-sp hero is-light">
    <div id="sponsors-hero" class="hero-body">
      <div class="container">
        <h1 class="title is-6 has-text-grey">
          Sponsors
        </h1>
        <a href="https://linode.com"><img src="{% static "images/sponsors/linode.png" %}" alt="Linode"/></a>
        <a href="https://jetbrains.com"><img src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains"/></a>
        <a href="https://adafruit.com"><img src="{% static "images/sponsors/adafruit.png" %}" alt="Adafruit"/></a>
      </div>
    </div>
  </section>

{% endblock %}