{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}My Profile - Gvelo Enterprise Platform{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/hil-pages/profile.css">
{% endblock %}
{% block content %}
<div class="container">
    <div class="nav-links">
        <a href="/dashboard">&larr; Dashboard</a>
        <a href="/change-password">Change Password</a>
        {% if user[6] == 'admin' %}
        <a href="/admin">Admin Panel</a>
        {% endif %}
    </div>
    
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="flash {{ category }}">{{ message }}</div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <div class="card">
        <h2>My Profile</h2>
        <p><span class="role-badge {{ user[6] }}">{{ user[6] }}</span></p>
        
        <form method="POST" action="/profile" enctype="multipart/form-data">
            <div class="form-group">
                <label>Full Name</label>
                <input type="text" name="full_name" value="{{ user[4] or '' }}" required>
            </div>
            <div class="form-group">
                <label>Username</label>
                <input type="text" value="{{ user[1] }}" disabled>
            </div>
            <div class="form-group">
                <label>Email</label>
                <input type="email" name="email" value="{{ user[2] or '' }}" required>
            </div>
            <div class="form-group">
                <label>Phone</label>
                <input type="text" name="phone" value="{{ user[3] or '' }}" required>
            </div>
            <div class="form-group">
                <label>New Password <small>(leave blank to keep current)</small></label>
                <input type="password" name="new_password" minlength="8" placeholder="Min 8 characters">
            </div>
            <div class="form-group">
                <label>Certification Upload <small>(PDF, JPG, PNG - optional)</small></label>
                <input type="file" name="certification" accept=".pdf,.jpg,.jpeg,.png">
                {% if user[5] %}
                    <a class="cert-link" href="/uploads/certifications/{{ user[5] }}" target="_blank">View current certification</a>
                {% endif %}
            </div>
            <button type="submit">Update Profile</button>
        </form>
    </div>
{% endblock %}