templates/deliverable_detail.html

{% extends "base.html" %}

{% block title %}{{ deliverable.title }} - Deliverable - MV+{% endblock %}

{% block content %}
<div class="deliverable-detail-container">
    <div class="deliverable-detail-content">
        <div class="deliverable-detail-header">
            <div class="deliverable-title">
                <h1>{{ deliverable.title }}</h1>
                <div class="deliverable-badges">
                    <span class="status-badge {{ deliverable.status }}">{{ deliverable.status.title() }}</span>
                    <span class="priority-badge {{ deliverable.priority }}">{{ deliverable.priority.title() }}</span>
                </div>
            </div>
            <div class="deliverable-actions">
                <a href="{{ url_for('edit_deliverable', deliverable_id=deliverable.id) }}" class="btn btn-primary">Edit</a>
                <a href="{{ url_for('deliverables') }}" class="btn btn-outline">Back to Deliverables</a>
            </div>
        </div>

        <div class="deliverable-detail-info">
            <div class="info-section">
                <h3>Description</h3>
                <p>{{ deliverable.description or 'No description available' }}</p>
            </div>

            <div class="info-grid">
                <div class="info-item">
                    <label>Type</label>
                    <span>{{ deliverable.deliverable_type or 'Not specified' }}</span>
                </div>
                
                <div class="info-item">
                    <label>Status</label>
                    <span class="status-badge {{ deliverable.status }}">{{ deliverable.status.title() }}</span>
                </div>
                
                <div class="info-item">
                    <label>Priority</label>
                    <span class="priority-badge {{ deliverable.priority }}">{{ deliverable.priority.title() }}</span>
                </div>
                
                {% if deliverable.project_name %}
                <div class="info-item">
                    <label>Project</label>
                    <span>{{ deliverable.project_name }}</span>
                </div>
                {% endif %}
                
                {% if deliverable.due_date %}
                <div class="info-item">
                    <label>Due Date</label>
                    <span>{{ deliverable.due_date }}</span>
                </div>
                {% endif %}
                
                {% if deliverable.completed_at %}
                <div class="info-item">
                    <label>Completed At</label>
                    <span>{{ deliverable.completed_at }}</span>
                </div>
                {% endif %}
                
                <div class="info-item">
                    <label>Created</label>
                    <span>{{ deliverable.created_at[:10] }}</span>
                </div>
                
                <div class="info-item">
                    <label>Last Updated</label>
                    <span>{{ deliverable.updated_at[:10] }}</span>
                </div>
            </div>
        </div>

        <div class="deliverable-detail-actions">
            <form method="POST" action="{{ url_for('toggle_deliverable_status', deliverable_id=deliverable.id) }}" style="display: inline;">
                <button type="submit" class="btn btn-primary">
                    {% if deliverable.status == 'completed' %}Mark as Pending{% else %}Mark as Complete{% endif %}
                </button>
            </form>
            
            <a href="{{ url_for('edit_deliverable', deliverable_id=deliverable.id) }}" class="btn btn-secondary">Edit Details</a>
            
            <form method="POST" action="{{ url_for('delete_deliverable', deliverable_id=deliverable.id) }}" 
                  style="display: inline;" 
                  onsubmit="return confirm('Are you sure you want to delete this deliverable? This action cannot be undone.')">
                <button type="submit" class="btn btn-danger">Delete</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}