{% extends 'base.html' %}

{% block head %}
    <script>
        $(function () {
            $('tr').click(function (e) {
                var url = $(e.target).parent().attr('href');
                if (url) window.open(url, '_blank');
            });
        });
    </script>
{% endblock %}

{% block body %}
    <div class="container-fluid bg-light-blue">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-9 py-3">
                    <div>
                        <h3 class="mb-0">{{ expert.name }}</h3>
                        {% if expert.CV and perms.expert_witnesses.view_cv %}
                            <a href="/media/{{ expert.CV }}" target="_blank">
                                <i class="fa fa-file-pdf-o" aria-hidden="true"></i> Download CV
                            </a>
                        {% endif %}
                        <div>
                            {% if expert.institute %}
                                <i class="fa fa-institution"></i> {{ expert.institute }}
                            {% else %}
                                <span class="text-muted"><i class="fa fa-institution"></i> No Institute</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="d-md-none mt-5">
                        <h5 class="ml-1">Expertise</h5>
                        <ul class="pl-0" style="list-style: none">
                            {% for e in expert.expertise.all %}
                                <li><i class="fa fa-graduation-cap" aria-hidden="true"></i> {{ e.field }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                    <div class="mt-5">
                        <h5 class="ml-1">Cases</h5>
                        <table class="table {% if perms.case_law.view_pdf %}table-hover{% endif %} bg-white">
                            <thead>
                            <tr>
                                <th class="p-2">Synopsis</th>
                                <th class="p-2">Date</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for case in expert.cases.all %}
                                <tr {% if perms.case_law.view_pdf %}class="curs-pointer"
                                    href="/media/{{ case.pdf }}"{% endif %}>
                                    <td class="p-2">{{ case.synopsis }}</td>
                                    <td class="p-2" width="150px">{{ case.published }}</td>
                                </tr>
                            {% endfor %}
                            {% if not expert.cases.all %}
                                <tr>
                                    <td class="text-muted">No Cases</td>
                                </tr>
                            {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="d-none d-md-block col-3 bg-dark-primary text-white py-3">
                    <h5>Areas of Expertise</h5>
                    <ul class="pl-0" style="list-style: none">
                        {% for e in expert.expertise.all %}
                            <li><i class="fa fa-graduation-cap" aria-hidden="true"></i> {{ e.field }}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
{% endblock %}