{% extends 'admin/base_admin.html' %}

{% block title %}
    {% if object %}Edit Agent: {{ object.username }}{% else %}Add Agent{% endif %} | ChatLab
{% endblock %}
{% block admin_agent_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h2 class="page-title">{% if object %}Edit Agent: {{ object.username }}{% else %}Add New Agent{% endif %}</h2>
        <p class="page-subtitle">{% if object %}Modify agent details or reset password.{% else %}Create a login account for a team member.{% endif %}</p>
    </div>
    <a href="{% url 'admin_agent_list' %}" class="btn btn-secondary">
        &larr; Back to Agents
    </a>
</div>

<div class="glass-card form-container" style="padding: 2.5rem; margin-top: 1rem;">
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}

        <div class="form-group">
            <label for="id_username" class="form-label">Agent Username</label>
            <input type="text" name="username" id="id_username" class="form-input" placeholder="e.g. agent_rahim" required value="{% if object %}{{ object.username }}{% endif %}" {% if object %}readonly style="background-color: rgba(255,255,255,0.05); color: var(--text-muted);"{% endif %}>
        </div>

        <div class="form-group">
            <label for="id_password" class="form-label">Agent Password {% if object %}(optional){% endif %}</label>
            <input type="password" name="password" id="id_password" class="form-input" placeholder="{% if object %}Leave blank to keep current password{% else %}Set a secure password{% endif %}" {% if not object %}required{% endif %}>
        </div>

        <div class="form-group">
            <label for="id_email" class="form-label">Email (optional)</label>
            <input type="email" name="email" id="id_email" class="form-input" placeholder="agent@company.com" value="{% if object %}{{ object.email }}{% endif %}">
        </div>

        <div class="form-group">
            <label for="id_agent_name" class="form-label">Agent Display Name (As shown in chat)</label>
            <input type="text" name="agent_name" id="id_agent_name" class="form-input" placeholder="e.g. Rahim Ahmed - Support Team" value="{% if object %}{{ object.agent_name }}{% endif %}">
            <span style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.35rem; display: block;">
                This name will be displayed at the top of the chat when the agent joins.
            </span>
        </div>

        <div class="form-group">
            <label for="id_agent_photo" class="form-label">Agent Photo (optional)</label>
            {% if object.agent_photo %}
                <div style="margin-bottom: 0.75rem; display: flex; align-items: center; gap: 1rem;">
                    <img src="{{ object.agent_photo.url }}" alt="{{ object.username }}" style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover;">
                    <span style="font-size: 0.85rem; color: var(--text-muted);">Current Photo</span>
                </div>
            {% endif %}
            <div style="display:flex; align-items:center; gap:1rem;">
                <input type="file" name="agent_photo" id="id_agent_photo" accept="image/*" class="form-input" style="padding: 0.35rem;">
                <span style="font-size:0.78rem; color:var(--text-muted);">Upload a square avatar; the server will compress it to an optimized size.</span>
            </div>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary">
                {% if object %}Save Changes{% else %}Create Agent{% endif %}
            </button>
            <a href="{% url 'admin_agent_list' %}" class="btn btn-secondary">
                Cancel
            </a>
        </div>
    </form>
</div>
{% endblock %}