{% extends "userapp/master.html" %}
{% load static %}
{% block content %}

<body>
    <!-- Start Hero Section -->
    <div class="hero">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-lg-5">
                    
                </div>
                <div class="col-lg-7"></div>
            </div>
        </div>
    </div>
    <!-- End Hero Section -->
<div class="container profile-container mt-5">
    <div class="card">
        <div class="card-header">
            <h4><i class="fas fa-user"></i> Your Profile</h4>
        </div>
        <div class="card-body">
            <div class="profile-info">
                <p><i class="fas fa-user"></i> <strong>Username:</strong> {{ user.username }}</p>
                <p><i class="fas fa-envelope"></i> <strong>Email:</strong> {{ user.email }}</p>
                <p><i class="fas fa-phone"></i> <strong>Phone:</strong> {{ user.phone|default_if_none:"Not Provided" }}</p>
                <p><i class="fas fa-map-marker-alt"></i> <strong>Address:</strong> {{ user.address|default_if_none:"Not Provided" }}</p>
            </div>
            <a href="{% url 'manage_profile_view' %}" class="btn btn-secondary w-100"><i class="fas fa-edit"></i>  Edit Profile</a>
            <a href="{% url 'userindex' %}" class="btn btn-secondary w-100"><i class="fas fa-home"></i> Go to Dashboard</a>
        </div>
    </div>
</div>

<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>

<style>
    body {
        background-color: #f8f9fa;
    }
    .profile-container {
        max-width: 500px;
        margin: 50px auto;
    }
    .card {
        border-radius: 12px;
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
    }
    .card-header {
        
        border-radius: 12px 12px 0 0;
        text-align: center;
        padding: 20px;
        font-size: 20px;
        font-weight: bold;
    }
    .profile-info {
        font-size: 16px;
        padding: 10px 0;
    }
    .profile-info i {
        color:rgb(12, 7, 6);
        margin-right: 8px;
    }
    .btn-secondary {
        background-color: #6c757d;
        border: none;
        border-radius: 8px;
        padding: 12px;
        transition: all 0.3s ease;
        font-size: 16px;
        color: white;
        margin-top: 10px;
        display: block;
        text-align: center;
    }
    .btn-secondary:hover {
        background-color: #5a6268;
    }
</style>

</body>
</html>
{% endblock  %}