{% if is_developer %}
<form method="post" action="{% url 'planning:edit_item' item.pk %}">
    {% csrf_token %}
    <input type="hidden" name="next" id="editItemNext">
    <div class="form-group" style="margin-bottom: 1.5rem;">
        <label style="color: var(--text-muted); display: block; margin-bottom: 0.5rem;">Title</label>
        <input type="text" name="title" class="form-control" value="{{ item.title }}"
            style="font-size: 1.2rem; font-weight: bold; color: var(--primary-color);" required>
    </div>

    <div style="display: flex; gap: 1rem; margin-bottom: 1.5rem;">
        <div class="form-group" style="flex: 1; margin-bottom: 0;">
            <label style="color: var(--text-muted); display: block; margin-bottom: 0.5rem;">Status</label>
            <select name="status" class="form-control">
                {% for value, label in statuses %}
                <option value="{{ value }}" {% if item.status == value %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form-group" style="flex: 1; margin-bottom: 0;">
            <label style="color: var(--text-muted); display: block; margin-bottom: 0.5rem;">Charge Number</label>
            <select name="charge_number" class="form-control">
                <option value="">-- No Charge Number --</option>
                {% for cn in qbd_charge_numbers %}
                <option value="{{ cn.id }}" {% if item.charge_number_id == cn.id %}selected{% endif %}>{{ cn }}</option>
                {% endfor %}
            </select>
        </div>
    </div>

    <div class="form-group">
        <label style="color: var(--text-muted); display: block; margin-bottom: 0.5rem;">Description</label>
        <textarea name="description" class="form-control" rows="6">{{ item.description }}</textarea>
    </div>

    <hr style="border: 0; border-top: 1px solid rgba(255,255,255,0.1); margin: 2rem 0 1rem;">
    <div style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1.5rem;">
        Created: {{ item.created_at|date:"M d, Y H:i" }}<br>
        Updated: {{ item.updated_at|date:"M d, Y H:i" }}
    </div>

    <div style="display: flex; justify-content: space-between;">
        <button type="submit" class="btn" style="padding: 0.8rem 2rem;">Save Changes</button>
        <button type="button" class="btn"
            style="background: transparent; border: 1px solid #ff4444; color: #ff4444; padding: 0.8rem 2rem;"
            onclick="if(confirm('Are you sure you want to delete this ticket?')) document.getElementById('deleteItemForm').submit();">Delete
            Ticket</button>
    </div>
</form>

<form id="deleteItemForm" method="post" action="{% url 'planning:delete_item' item.pk %}" style="display:none;">
    {% csrf_token %}
    <input type="hidden" name="next" id="deleteItemNext">
</form>

<script>
    // Ensure form redirects to the current page upon save or delete
    document.getElementById('editItemNext').value = window.location.pathname;
    document.getElementById('deleteItemNext').value = window.location.pathname;

    // Handle AJAX submission for editing
    const editForm = document.querySelector('form[action*="edit"]');
    if (editForm) {
        editForm.onsubmit = (e) => {
            e.preventDefault();
            const formData = new FormData(editForm);
            fetch(editForm.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRFToken': formData.get('csrf_token')
                }
            }).then(res => res.json())
                .then(data => {
                    if (data.status === 'success') {
                        // Close modal and refresh the current page to show updates
                        // (Alternatively, we could update the item in the DOM dynamically)
                        location.reload();
                    } else {
                        alert('Error updating item: ' + (data.message || 'Unknown error'));
                    }
                });
        };
    }
</script>
{% else %}
<h2 style="color: var(--primary-color); margin-bottom: 1rem;">{{ item.title }}</h2>
<div style="margin-bottom: 1.5rem; display: flex; gap: 1rem; align-items: center;">
    <span
        style="background: var(--surface-color); padding: 0.3rem 0.6rem; border-radius: 4px; font-size: 0.8rem; border: 1px solid var(--secondary-color);">{{
        item.get_status_display }}</span>
    {% if item.charge_number %}
    <span
        style="background: rgba(188, 19, 254, 0.1); padding: 0.3rem 0.6rem; border-radius: 4px; font-size: 0.8rem; border: 1px solid var(--secondary-color); color: var(--secondary-color);">Charge
        Number: <strong>{{ item.charge_number.contract.name }} ({{ item.charge_number.slug }})</strong> ({{
        item.charge_number.get_percent_complete|floatformat:0 }}% Complete)</span>
    {% endif %}
</div>
<div style="color: var(--text-color); line-height: 1.6; white-space: pre-wrap;">
    {% if item.description %}
    {{ item.description }}
    {% else %}
    <span style="color: var(--text-muted); font-style: italic;">No description provided.</span>
    {% endif %}
</div>
<hr style="border: 0; border-top: 1px solid rgba(255,255,255,0.1); margin: 2rem 0 1rem;">
<div style="font-size: 0.8rem; color: var(--text-muted);">
    Created: {{ item.created_at|date:"M d, Y H:i" }}<br>
    Updated: {{ item.updated_at|date:"M d, Y H:i" }}
</div>
{% endif %}