{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}


<style type="text/css">
a.back-btn::before {
    font-weight: 900;
    content: '\f104';
    font-family: 'Font Awesome 5 Free';
    margin-right: 10px;
}
.heading-top {
    background-color: #ccc75d;
    padding: 18px;
    border-radius:.25rem;
    display: flex;
    justify-content: space-between;
    margin: 30px 0 20px;
}
.heading-top a,
.heading-top  h2.f-20.mb-0 {
    color: #fff;
    text-decoration: none;
}
.sup-box {
    padding: 20px;
    background-color: #fff;
    height: 200px;
    border-radius: .25rem;
}

</style>
<title>Laura | Help & Support View</title>
<div class="container-fluid">
    <div class="inner-content">
        <!-- Page Heading -->
        <div class="support-view">
            <a style="background-color: #ccc75d; color: #fff;text-decoration: none;padding: 10px 20px;display: inline-block;position: relative;border-radius: 5px;" href="/help-and-support-list" class="back-btn">Back</a>

            <div class="heading-top shadow">
                <h2 class="f-20 mb-0">Help & Support</h2>
            </div>
            <div class="heading-box">
                <div class="row">
                    <div class="col-12 col-xl-6 col-md-6">
                        <div class="sup-box shadow">
                            <p><strong>Email: </strong>{{sup_obj.user.email}}</p>
                            <p><strong>Subject: </strong>{{sup_obj.title}}</p>
                            <p><strong>Date: </strong>{{sup_obj.start_date| date:"d M  Y"}}</p>
                            <p><strong>Message: </strong>{{sup_obj.description}}</p>
                        </div>
                    </div>
                    <div class="col-12 col-xl-6 col-md-6">
                        <div class="sup-box shadow">
                            <p><strong>Admin Message: </strong>{{sup_obj.reply|striptags}}</p>
                            <p><strong>Reply Date: </strong>{{sup_obj.reply_date | date:"d M  Y"}}</p>
                            <p><strong>Status: </strong>Complete</p>

                        </div>
                    </div>
            </div>
            </div>

            </div>
    </div>
</div>
<!-- /.container-fluid -->

{% endblock %}