{% extends base_template|default:"djangohelpers_base.htm" %}
{% load staticfiles %}
{% load user_tags %}

{% block content %}
    <!-- Page header -->
    <header class="m-5">
        <div class="headline text-center">
            <div class="container">
                <div class="h1 text-primary font-weight-bold">{{ page_title }}</div>
                <h3 class="h5 text-secondary">{{ page_subtitle }}</h3>
            </div>
        </div>
    </header>

    <!-- Page Content -->
    <div class="flex-container wrap text-center m-5">

        <!-- unprotected items -->
        {% for item in item_list %}
            <a href="{{ item.url }}">
                <div class="card border border-dark mb-1 text-center hvr-float-shadow m-2" style="background-color: whitesmoke; width: 350px; height: 150px;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-10">
                                <h3 class="card-title text-left text-primary font-weight-bold mt-n2 ml-n2">{{ item.title }}</h3>
                            </div>
                            <div class="col-2">
                                <h2 class="card-title text-secondary mt-n3 mr-n3"><i class="{{ item.icon }}"></i></h2>
                            </div>
                        </div>
                        <p class="card-text text-left text-secondary mt-2 ml-2">{{ item.text }}</p>
                    </div>
                </div>
            </a>
        {% endfor %}

        <!-- protected items -->
        {% if request.user|has_group:protected_group_name %}
            {% for item in protected_item_list %}
                <a href="{{ item.url }}">
                    <div class="card border border-dark mb-1 text-center hvr-float-shadow m-2" style="background-color: whitesmoke; width: 350px; height: 150px;">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-10">
                                    <h3 class="card-title text-left text-primary font-weight-bold mt-n2 ml-n2">{{ item.title }}</h3>
                                </div>
                                <div class="col-2">
                                    <h2 class="card-title text-secondary mt-n3 mr-n3"><i class="{{ item.icon }}"></i></h2>
                                </div>
                            </div>
                            <p class="card-text text-left text-secondary mt-2 ml-2">{{ item.text }}</p>
                        </div>
                    </div>
                </a>
            {% endfor %}
        {% endif %}
    </div>

{% endblock %}
