{% extends 'base.html' %}

{% block content %}

<div class="container">
    <p class="subtitle is-3 content is-vcentered has-text-centered">All resources to learn {{category}}</p>

    <div style="margin-left: 0.3rem;" class="columns is-mobile is-centered">
        <div class="column is-half">
            <p class="subtitle is-4">Filter by level</p>
            <div class="control">
                <div class="select">
                    <form action="">
                        {{ level_form.hidden_tag() }}
                        {{ level_form.level(**{'hx-vals': '{"category":"%s"}'|format(category), 'hx-post': url_for('filtered_resources'), 'hx-target': '#resources'}) }}
                    </form>
                </div>
            </div>
        </div>

        <div class="column is-half">
            <p class="subtitle is-4">Filter by type</p>
            <div class="control">
                <div class="select">
                    <form action="">
                        {{ type_form.hidden_tag() }}
                        {{ type_form.type(**{'hx-vals': '{"category":"%s"}'|format(category), 'hx-post': url_for('filtered_resources'), 'hx-target': '#resources'}) }}
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div id="resources">
        {% for res in resources %}
        <div class="card">
            <div class="card-content">
                <div class="content">
                    <p class="title is-4">{{res.title}}</p>
                </div>
                <span class="tag is-danger">{{res.level}}</span>
                <span class="tag is-info">{{res.type}}</span>
                <div class="content">
                    {% if res.reviews %}
                        <hr />
                        <h5 class="subtitle is-5">Reviews</h5>
                        {% for review in res.reviews %}
                            <p>"{{review}}"</p>
                        {% endfor %}
                    {% endif %}
                </div>
                <footer class="card-footer">
                    <a href={{res.url}} class="card-footer-item" rel="noreferrer noopener" target="_blank">Open Link</a>
                    <a target="_blank"
                        href="http://twitter.com/share?text=Hey, checkout this resource {{res.title}} via saadhan.developersindia.in&url={{res.url}}&hashtags=developersindia"
                        class="card-footer-item">Tweet</a>
                </footer>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

{% endblock content %}