{% 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.contract.name }} - {{ cn.slug }}</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;
</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 %}