templates/in_progress_deliverables.html

{% extends "base.html" %}

{% block title %}In Progress Deliverables - MV+{% endblock %}

{% block content %}
<div class="deliverables-container">
    <div class="deliverables-content">
        <div class="deliverables-header">
            <h1>In Progress Deliverables</h1>
            <p>Track your currently active deliverables</p>
            <!-- Deliverable management features coming soon -->
        </div>

        {% if deliverables %}
        <div class="deliverables-filters">
            <div class="filter-group">
                <label for="priority-filter">Filter by Priority:</label>
                <select id="priority-filter">
                    <option value="">All Priorities</option>
                    <option value="high">High</option>
                    <option value="medium">Medium</option>
                    <option value="low">Low</option>
                </select>
            </div>
        </div>

        <div class="deliverables-grid">
            {% for deliverable in deliverables %}
            <div class="deliverable-card in-progress" data-priority="{{ deliverable.priority }}">
                <div class="deliverable-header">
                    <h3>{{ deliverable.title }}</h3>
                    <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-content">
                    <p class="deliverable-description">{{ deliverable.description or 'No description available' }}</p>
                    <div class="deliverable-meta">
                        <span class="deliverable-type">{{ deliverable.deliverable_type or 'General' }}</span>
                        {% if deliverable.project_name %}
                        <span class="project-name">Project: {{ deliverable.project_name }}</span>
                        {% endif %}
                        {% if deliverable.due_date %}
                        <span class="due-date">Due: {{ deliverable.due_date }}</span>
                        {% endif %}
                    </div>
                </div>
                <div class="deliverable-actions">
                    <a href="{{ url_for('deliverable_detail', deliverable_id=deliverable.id) }}" class="btn btn-primary">View Details</a>
                    <a href="{{ url_for('edit_deliverable', deliverable_id=deliverable.id) }}" class="btn btn-secondary">Edit</a>
                    <form method="POST" action="{{ url_for('toggle_deliverable_status', deliverable_id=deliverable.id) }}" style="display: inline;">
                        <button type="submit" class="btn btn-outline">Mark Complete</button>
                    </form>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="no-deliverables">
            <h3>No In Progress Deliverables</h3>
            <p>You don't have any deliverables currently in progress. Start a new one!</p>
            <a href="{{ url_for('create_deliverable') }}" class="btn btn-primary">Create Your First Deliverable</a>
        </div>
        {% endif %}
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Filter functionality
    const priorityFilter = document.getElementById('priority-filter');
    const deliverableCards = document.querySelectorAll('.deliverable-card');
    
    function filterDeliverables() {
        const priorityValue = priorityFilter.value;
        
        deliverableCards.forEach(card => {
            const cardPriority = card.dataset.priority;
            
            const priorityMatch = !priorityValue || cardPriority === priorityValue;
            
            if (priorityMatch) {
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        });
    }
    
    if (priorityFilter) {
        priorityFilter.addEventListener('change', filterDeliverables);
    }
});
</script>
{% endblock %}