{% load static %}

{# Current/next event to promote #}
<div class="box has-background-warning-light" style="padding: 2rem; padding-top: .75rem; margin-top: 2rem;">
    <small class="has-text-grey">Upcoming event</small>
    <div class="columns is-3 mt-1" style="--columnGap: 0.75rem;">
        <div class="column">
            <h2 class="title is-4"><a href="{% url "events:page" path="code-jams/11" %}">Summer Code Jam 2024</a></h2>
            <p class="subtitle is-6" style="margin-top: -.75rem;">
                <span class="icon-text">
                    <span class="icon"><i class="fa-regular fa-calendar"></i></span><span>July 3 - August 1</span>
                </span>
            </p>
        </div>
        <div class="column">
            <img src="{% static "images/events/summer_code_jam_2024/banner.webp" %}" style="border-radius: 10px;" alt="Code Jam 2024">
        </div>
    </div>
    <div class="notification is-success">
        The <strong>2024 Summer Code Jam</strong> is currently underway and you can still enter!
        <strong>The qualifier is open until July 10</strong>; check out the details <a href="{% url "events:page" path="code-jams/11" %}">here</a>.
    </div>
    <p>Once a year we host a code jam for members of our server to participate in. The code jam is an event where we place you
        in a team with 5 other random server members. You then have 11 days to code some sort of application or program in Python.
        Your program must use the specified technology/framework and incorporate the theme chosen by the server.</p>
    <a class="button is-primary" href="{% url "events:page" path="code-jams/11" %}">
        <span class="icon-text">
            <span>Learn more</span><span class="icon"><i class="fa-solid fa-arrow-right"></i></span>
        </span>
    </a>
</div>