{% 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) where available.
                </p>
                <p class="uk-text-center">
                    <span class="fa-layers fa-fw">
                        <i class="fas fa-circle" style="color: green"></i>
                        <i class="fa-inverse fas fa-dollar-sign" data-fa-transform="shrink-6"></i>
                    </span>
                    Free
                    <span class="fa-layers fa-fw">
                        <i class="fas fa-circle" style="color: darkgoldenrod"></i>
                        <i class="fa-inverse fas fa-dollar-sign" data-fa-transform="shrink-6"></i>
                    </span>
                    Payment Optional
                    <span class="fa-layers fa-fw">
                        <i class="fas fa-circle" style="color: darkred"></i>
                        <i class="fa-inverse fas fa-dollar-sign" data-fa-transform="shrink-6"></i>
                    </span>
                    Paid
                </p>

                {% 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_description"] %}
                                    <span class="fa-layers fa-fw" uk-tooltip="{{ data["payment_description"] }}">
                                {% else %}
                                    <span class="fa-layers fa-fw">
                                {% endif %}

                                {% if data["payment"] == "optional" %}
                                        <i class="fas fa-circle" style="color: darkgoldenrod"></i>
                                {% elif data["payment"] == "paid" %}
                                        <i class="fas fa-circle" style="color: darkred"></i>
                                {% else %}
                                        <i class="fas fa-circle" style="color: green"></i>
                                {% endif %}
                                        <i class="fa-inverse fas fa-dollar-sign" data-fa-transform="shrink-6"></i>
                                    </span>
                                <strong>{{ item }}</strong> &nbsp;<a href="{{ data.url }}"><i class="fas fa-link"></i></a>

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