{% extends 'base.html' %}
{% load static %}

{% block body %}
    <style>
        a.cases {
            text-decoration: none;
        }

        .cases .card-body p {
            background: -webkit-linear-gradient(#555555, #ffffff);
            -webkit-background-clip: text;
            color: transparent;
            transition: color 0.25s;
        }

        .cases .card-body p:hover {
            color: #555555;
        }
    </style>
    <div class="container-fluid bg-dark-primary">
        <div class="row">
                <ol class="col-12 mb-0 breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{% url 'home' %}"><i class="fa fa-home"></i></a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{% url 'caselaw' %}">Case Law</a>
                    </li>
                    {% for item in urls %}
                        <li class="breadcrumb-item{% if forloop.last %} active{% endif %}">
                            <a {% if not forloop.last %}href="{% url 'caselaw' %}?path=

                                    {% for item2 in urls %}{% if forloop.counter0 <= forloop.parentloop.counter0 %}{{ item }}{% endif %}{% endfor %}"{% endif %}>
                                {{ item }}
                            </a>
                        </li>
                    {% endfor %}
                </ol>
                <div class="col-md-3 text-white pt-5">
                    <h4>Headings
                        {% if headingCount > 1 and caseCount > 1 and not filter %}
                            <span class="text-muted">({{ headingCount }})</span>
                        {% endif %}
                    </h4>
                    <hr style="border-color:#ffffff !important">
                    {% if headingCount > 1 and caseCount > 1 and not filter %}
                        {% for heading in headings %}
                            <div>
                                <a href="{% url 'caselaw' %}?path={% if url %}{{ url }}/{% endif %}{{ heading }}">
                                    <h4 class="d-inline-block" style="color:#D8D8D8"><i
                                            class="fa fa-folder-open-o"></i> {{ heading }}
                                    </h4>
                                </a>
                            </div>
                        {% endfor %}
                        <br>
                    {% endif %}
                </div>
            <div class="{% if not filter %}col-md-9{% else %}col-12{% endif %} bg-light-blue pt-5">
                <h4>Cases <span class="text-muted">({{ caseCount }})</span></h4>
                <hr>
                <div class="row">
                    {% for case in cases %}
                        <a class="col-md-4 col-lg-3 mb-3 cases" target="_blank"
                           {% if perms.case_law.view_pdf %}href="/media/{{ case.pdf }}"{% endif %}>
                            <div class="card" style="overflow:hidden;">
                                <div class="tc">
                                    <div class="card-header">
                                        <span class="text-muted">{{ case.published }}</span>
                                    </div>
                                    <div class="card-body" style="position:relative; height:150px; overflow:hidden;">
                                        <span class="card-text text-secondary">{{ case.synopsis | linebreaks }}</span>
                                        <div class="gradient">
                                        </div>
                                    </div>
                                    <div class="card-footer p-1">
                                        {% for heading in case.headings.all|dictsort:'name' %}
                                            <span class="badge badge-primary">{{ heading.name }}</span>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <script>
        $('#search').click(function () {
            var selected = $('input.filters').filter(function (i, e) {
                return $(e).is(':checked')
            }).map(function (i, e) {
                return $(e).val()
            });

            window.location.href = '{% url 'caselaw' %}?filter=' + selected.toArray().join('/');
        })
    </script>
{% endblock %}