{% extends 'base_structure/layout/base_template.html' %}
{% load static %}
{% block stylesheet %}
<!-- include required css cdn link through html here -->

{% endblock %}

{% block content %}


<div class="row layout-top-spacing">
    <div class="col-lg-12">
        <div class="row mb-2">
            <div class="col">
                <a onclick="history.back()" style="height: fit-content;width: fit-content;display: inline-block;">
                <h3 class="card-title m-2 d-flex align-items-center gap-2" style="width: fit-content;">
                    <span class="fw-bold material-symbols-outlined">
                    arrow_back
                    </span><span>Meal Symptoms Details</span></h3>
                </a>
            </div>
        </div>

        <div class="row layout-spacing">
            <div class="col-lg-12">
                <div class="statbox widget box box-shadow">
                    <div class="widget-content widget-content-area">
                        <div class="row Users-tab p-4">
                            <div class="col-md-12">
                                <!-- Symptom Record Details Card -->
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h4 class="card-title">Symptom Record Details</h4>
                                    </div>
                                    <div class="card-body">
                                        <p><strong>Date:</strong> {{ obj.date }}</p>
                                        <p><strong>Symptoms Description:</strong> {{ obj.symptoms_description }}</p>
                                        <p>
                                            <strong>Interval:</strong> 
                                            {{ obj.interval }}
                                        </p>
                                    </div>
                                </div>
                            
                                <!-- Symptoms Before Meal Card -->
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h4 class="card-title">Symptoms Before Meal</h4>
                                    </div>
                                    <div class="card-body">
                                        {% for symptom in obj.symptoms_before_meal.all %}
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <p>{{ symptom.name }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            
                                <!-- Symptoms After Meal Card -->
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h4 class="card-title">Symptoms After Meal</h4>
                                    </div>
                                    <div class="card-body">
                                        {% for symptom in obj.symptoms_after_meal.all %}
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <p>{{ symptom.name }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            
                            </div>
                            
                            
                        </div>
                </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock content %}

{% block javascript %}
<!-- include required js cdn link through html here -->


<script>

</script>
{% endblock %}