{% extends 'base.html' %}
{% block title %}IvoryOS | Dashboard{% endblock %}

{% block body %}
<div class="p-4" style="max-width: 1400px; margin: 0 auto;">
    
    <!-- SYSTEM STATUS HEADER -->
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 pb-3 border-bottom">
        <div>
            <h1 class="h2 mb-1" style="font-weight: 700; color: #2c3e50; letter-spacing: -0.5px;">
                Welcome back, <span style="color: #387e81;">{{ current_user.get_id() }}</span>!
            </h1>
            <p class="text-muted mb-0">Manage and automate your liquid handling and experimental workflows.</p>
        </div>
        <div class="d-flex align-items-center gap-2 mt-2 mt-sm-0">
            {% if off_line %}
            <span class="badge d-inline-flex align-items-center gap-2 px-3 py-2 rounded-pill bg-warning-subtle text-warning border border-warning-subtle" style="font-size: 0.85rem;">
                <span class="spinner-grow spinner-grow-sm text-warning" role="status" style="width: 8px; height: 8px;"></span>
                Simulation Mode (Offline)
            </span>
            {% else %}
            <span class="badge d-inline-flex align-items-center gap-2 px-3 py-2 rounded-pill bg-success-subtle text-success border border-success-subtle" style="font-size: 0.85rem;">
                <span class="position-relative d-inline-flex">
                    <span class="relative inline-flex rounded-full h-2 w-2 bg-success" style="width: 8px; height: 8px; background-color: #198754; border-radius: 50%;"></span>
                </span>
                System Connected (Online)
            </span>
            {% endif %}
            <span class="badge bg-secondary-subtle text-secondary px-3 py-2 rounded-pill border" style="font-size: 0.85rem;">
                v{{ version }}
            </span>
        </div>
    </div>

    <!-- PIPELINE -->
    

    <!-- DYNAMIC MAIN SECTIONS -->
    <div class="row g-4 mb-5">
        <!-- LEFT COLUMN: RECENT DESIGNS -->
        <div class="col-lg-8">
            <div class="card border border-light-subtle h-100" style="border-radius: 8px;">
                <div class="card-body p-4 d-flex flex-column">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="card-title mb-0" style="font-weight: 600; color: #2c3e50;">
                            Recently Modified Designs
                        </h5>
                        <a href="{{ url_for('library.load_from_database') }}" class="btn btn-sm btn-outline-secondary rounded-pill px-3">
                            View Full Library
                        </a>
                    </div>

                    {% if recent_scripts %}
                    <div class="table-responsive flex-fill">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light text-secondary" style="font-size: 0.85rem;">
                                <tr>
                                    <th scope="col" class="ps-3 border-0">Workflow Name</th>
                                    <th scope="col" class="border-0">Deck Configuration</th>
                                    <th scope="col" class="border-0">Last Modified</th>
                                    <th scope="col" class="text-end pe-3 border-0">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for script in recent_scripts %}
                                <tr>
                                    <td class="ps-3">
                                        <div class="d-flex align-items-center gap-2">
                                            <span class="d-flex align-items-center justify-content-center rounded bg-teal-subtle text-teal p-2">
                                                <i class="bi bi-file-earmark-code-fill"></i>
                                            </span>
                                            <div>
                                                <div style="font-weight: 600; color: #2c3e50;">{{ script.name }}</div>
                                                <div class="small text-muted">{{ script.author or 'System' }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-secondary-subtle text-secondary border px-2 py-1 rounded" style="font-size: 0.8rem;">
                                            {{ script.deck }}
                                        </span>
                                    </td>
                                    <td class="small text-muted">
                                        {{ script.last_modified if script.last_modified else 'N/A' }}
                                    </td>
                                    <td class="text-end pe-3">
                                        <a href="{{ url_for('library.workflow_script', script_name=script.name) }}" class="btn btn-sm rounded-pill px-3 border-teal-btn">
                                            Open in Editor
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <!-- Placeholder when no designs exist -->
                    <div class="text-center py-5 my-auto">
                        <div class="rounded-circle bg-light-subtle d-inline-flex p-3 mb-3 border">
                            <i class="bi bi-folder-plus text-muted" style="font-size: 2rem;"></i>
                        </div>
                        <h6 class="mb-2" style="font-weight: 600;">No designs found in the database</h6>
                        <p class="text-muted small mx-auto mb-4" style="max-width: 320px;">Get started by building a new liquid handling script using the interactive block canvas.</p>
                        <a href="{{ url_for('design.experiment_builder') }}" class="btn btn-teal text-white rounded-pill px-4" style="background-color: #387e81;">
                            Create New Design
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- RIGHT COLUMN: GETTING STARTED -->
        {# What to do, in the order a lab does it; each row goes there. Not a tour: it is all
           here at once, and anyone who knows the way just clicks where they are going. #}
        {% macro step(number, url, title, text) %}
            <a href="{{ url }}" class="list-group-item list-group-item-action py-3 d-flex align-items-start gap-3 border-bottom px-0">
                <span class="getting-started-number">{{ number }}</span>
                <div class="flex-grow-1">
                    <div style="font-weight: 600; color: #2c3e50;">{{ title }}</div>
                    <div class="small text-muted">{{ text }}</div>
                </div>
                <i class="bi bi-chevron-right text-muted small align-self-center"></i>
            </a>
        {% endmacro %}
        <div class="col-lg-4">
            <div class="card border border-teal-light h-100" style="border-radius: 8px;">
                <div class="card-body p-4 d-flex flex-column">
                    <h5 class="card-title mb-2" style="font-weight: 600; color: #2c3e50;">
                        Getting Started
                    </h5>

                    {% set n = namespace(step=0) %}
                    <div class="list-group list-group-flush flex-fill">
                        {% if not off_line %}
                            {% set n.step = n.step + 1 %}
                            {{ step(n.step, url_for('control.deck_controllers'), 'Try Your Instruments',
                                    'Call methods directly.') }}
                        {% endif %}
                        {% set n.step = n.step + 1 %}
                        {{ step(n.step, url_for('design.experiment_builder'), 'Build a Workflow',
                                'Drag actions in; #name makes an input.') }}
                        {% set n.step = n.step + 1 %}
                        {{ step(n.step, url_for('execute.experiment_run'), 'Run It',
                                'Repeat, a table of values, or an optimizer.') }}
                        {% set n.step = n.step + 1 %}
                        {{ step(n.step, url_for('data.list_workflows'), 'Review the Results',
                                'Every step and value; export CSV.') }}
                    </div>

                    <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill align-self-start mt-3"
                            data-bs-toggle="modal" data-bs-target="#tipsModal">
                        <i class="bi bi-lightbulb me-1"></i>Workflow tips
                    </button>
                </div>
            </div>
        </div>
    </div>


</div>

<style>
    .getting-started-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 1.75rem;
        height: 1.75rem;
        border: 1px solid #387e81;
        border-radius: 50%;
        color: #387e81;
        font-size: 0.85rem;
        font-weight: 600;
    }
</style>

{# the same tips as the workflow designer's "?" #}
{% include 'components/info_modal.html' %}
{% endblock %}