{% extends 'admin/base.html.twig' %}

{% block body %}
    <main class="app-content">
        <div class="app-title">
            <div>
                <h1><i class="fa fa-phone"></i> Kontakti</h1>
            </div>
            <ul class="app-breadcrumb breadcrumb">
                <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
                <li class="breadcrumb-item"><a href="{{ path('admin_dashboard') }}">Dashboard</a></li>
            </ul>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="tile p-0">
                    <h4 class="tile-title folder-head">Upiti #{{ contact.id }}</h4>
                    <div class="tile-body">
                        <ul class="nav nav-pills flex-column mail-nav">
                            <li class="nav-item"><a class="nav-link"><i class="fa fa-user fa-fw"></i> {{ contact.name }}</a></li>
                            <li class="nav-item"><a class="nav-link"><i class="fa fa-envelope fa-fw"></i> {{ contact.email }}</a></li>
                            <li class="nav-item"><a class="nav-link"><i class="fa fa-phone fa-fw"></i> {{ contact.phone }}</a></li>
                            {% if contact.address != null %}
                            <li class="nav-item"><a class="nav-link"><i class="fa fa-map-marker fa-fw"></i> {{ contact.address }}</a></li>
                            {% endif %}
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-9">
                <div class="tile">
                    <h6><td><i style="color:#bb2032;" class="fa fa-clock-o fa-fw"></i> {{ contact.date|date("d.m.Y") }}</td></h6>
                    <div class="table-responsive mailbox-messages">
                        <table class="table table-hover">
                            <tbody>
                            <tr>
                                <td class="mail-subject"><b>Poruka</b>: {{ contact.message }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>


    </main>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <!-- Data table plugin-->
    <script type="text/javascript" src="{{ asset('js/admin/plugins/jquery.dataTables.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/admin/plugins/dataTables.bootstrap.min.js') }}"></script>
    <script type="text/javascript">$('#sampleTable').DataTable();</script>
{% endblock %}