{% extends 'base.html' %}

{% block title %}Dashboard - Manufacturing App{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Dashboard</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <button type="button" class="btn btn-sm btn-outline-secondary me-2"
                onclick="window.print()">
            <i class="fas fa-print"></i> Print Dashboard
        </button>
        <a href="{% url 'dashboard:configure_widgets' %}" class="btn btn-sm btn-outline-secondary">
            <i class="fas fa-cog"></i> Customize
        </a>
    </div>
</div>

<!-- Dashboard Grid -->
<div class="dashboard-grid" id="dashboard-grid">
    {% for widget_data in widgets_data %}
    <div class="dashboard-widget"
         data-widget-id="{{ widget_data.widget.id }}"
         data-position="{{ widget_data.position|json_script }}">
        {% include widget_data.widget.template_name with data=widget_data.data config=widget_data.config %}
    </div>
    {% empty %}
    <div class="col-12">
        <div class="alert alert-info">
            <h4>No widgets configured</h4>
            <p>You don't have any dashboard widgets configured yet.</p>
            <a href="{% url 'dashboard:configure_widgets' %}" class="btn btn-primary">Configure Widgets</a>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}

{% block extra_css %}
<style>
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.dashboard-widget {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

.widget-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
}

.widget-actions {
    display: flex;
    gap: 0.5rem;
}

.widget-content {
    min-height: 150px;
}
</style>
{% endblock %}

{% block extra_js %}
<script>
// Dashboard customization functionality
document.getElementById('customize-dashboard').addEventListener('click', function() {
    window.location.href = "{% url 'dashboard:configure_widgets' %}";
});

// Make widgets sortable
// This would require a JavaScript library like SortableJS
// Implementation details would go here
</script>
{% endblock %}