{% extends "main/base.html" %}
{% block title %}Resources{% endblock %}
{% block og_title %}Resources{% endblock %}
{% block og_description %}A list of helpful resources for beginner and experienced Python programmers alike{% endblock %}
{% block content %}
    <div class="uk-section">
        <div class="uk-container uk-container-small">
            <article class="uk-article">
                <h1 class="uk-article-title hover-title" id="top">
                    Resources

                    <a href="#top" class="uk-text-primary" title="Permanent link to this header">
                        <i class="fas fa-paragraph" data-fa-transform="shrink-8"></i>
                    </a>
                </h1>
                <p class="uk-article-meta">
                    Learn you a Haskell for great- wait, wrong book
                </p>
                <p>
                    This page is intended to be a listing of useful resources for beginner and experienced Python
                    programmers alike. This page is generated from a JSON file
                    <a href="https://github.com/discord-python/site/blob/master/static/resources.json">on GitHub</a> -
                    if there's a great resource that you love and you don't see it on this page, feel free to submit a
                    pull request!
                </p>
                <p>
                    Some resources aren't free - the below key will help you figure out whether you need to pay for
                    a resource or not. You can also hover them for more information on the payment (or tap them on
                    mobile).
                </p>
                <div class="uk-text-center uk-flex uk-flex-center">
                    <div class="payment-icon">
                        <img src="{{ static_file("images/payment_icons/green.svg") }}" uk-tooltip="Free" />
                        <span>Free</span>
                    </div>

                    <div class="payment-icon">
                        <img src="{{ static_file("images/payment_icons/yellow.svg") }}" uk-tooltip="Payment Optional" />
                        <span>Payment optional</span>
                    </div>

                    <div class="payment-icon">
                        <img src="{{ static_file("images/payment_icons/red.svg") }}" uk-tooltip="Paid" />
                        <span>Paid</span>
                    </div>
                </div>
                {% if categories is none %}
                    <div class="uk-alert-danger" uk-alert>
                        <p>
                            We were unable to load the <code>resources.json</code> file. If you see this, please
                            notify us!
                        </p>
                    </div>
                {% else %}
                    {% for category_name, category_data in categories.items() %}
                        <h2 class="uk-heading-divider hover-title" id="{{ category_name.replace(" ", "-").lower() }}">
                            {{ category_name }}

                            <a href="#{{ category_name.replace(" ", "-").lower() }}" class="uk-text-primary" title="Permanent link to this header">
                                <i class="fas fa-paragraph" data-fa-transform="shrink-8"></i>
                            </a>
                            <br/>
                            <p class="uk-article-meta">
                                {{ category_data.description }}
                            </p>
                        </h2>
                        {% for item, data in category_data.resources.items() %}
                            <p>
                                {% if data["payment"] == "optional" %}
                                    {% set file_path = static_file("images/payment_icons/yellow.svg") %}
                                {% elif data["payment"] == "paid" %}
                                    {% set file_path = static_file("images/payment_icons/red.svg") %}
                                {% else %}
                                    {% set file_path = static_file("images/payment_icons/green.svg") %}
                                {% endif %}

                                {% if data["payment_description"] %}
                                    <img class="uk-float-left" style="height: 3.7rem; vertical-align: text-bottom; margin-right: 0.5rem;" uk-tooltip="{{ data["payment_description"] }}" src="{{ file_path }}" />
                                {% else %}
                                    <img class="uk-float-left" style="height: 3.7rem; vertical-align: text-bottom; margin-right: 0.5rem;" uk-tooltip="{{ data["payment"].title() }}" src="{{ file_path }}" />
                                {% endif %}
                                <div style="margin-bottom: -1rem;">
                                    <strong>{{ item }}</strong> <br />
                                    <div class="uk-button-group" style="padding-bottom: 0;">
                                        {% for url in data.urls %}
                                        <a class="uk-button uk-button-default uk-button-small"
                                            uk-tooltip="title: {{ url.title }}; pos: bottom"
                                           href="{{ url.url }}"><i class="{{ url.classes }}"></i></a>
                                        {% endfor %}
                                    </div>
                                </div>

                                <br class="uk-float-" />
                                <span class="uk-text-meta">{{ data.description }}</span>
                            </p>
                        {% endfor %}
                    {% endfor %}
                {% endif %}
            </article>
        </div>
    </div>
{% endblock %}