<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>

<body>
    <div class="layout">

        <!-- LEFT: list_of_projects -->
        <aside class="sidebar">

            <!-- TITLE -->
            <div class="sidebar-title">
                <h2>{{ title }}</h2>
            </div>

            <div class="sidebar-header">
                <div class="muted">{{ project_count }} Project(s)</div>

                <div class="sidebar-actions">
                    <form method="get" action="{{ url_for('new', object_name=object_name) }}">
                        <button type="submit" class="sidebar-new" title="New project">📜</button>
                    </form>

                    <form method="get" action="{{ url_for('refresh_list_of_projects', object_name=object_name) }}">
                        <button type="submit" class="sidebar-new" title="Refresh list of projects">♻️</button>
                    </form>

                    <button type="button" id="theme-toggle" class="sidebar-toggle"
                        title="Toggle day / night">🌙</button>
                </div>
            </div>

            <div class="project-list">
                {% if list_of_projects %}
                {% for project in list_of_projects %}
                <a class="project-item {% if project.object_name == active_object_name %}active{% endif %}" href="{{ 
                    url_for('open_project', 
                    object_name=project.object_name) 
                }}" title="{{ project.subject }}">
                    <div class="project-title">{{ project.subject }}</div>
                </a>
                {% endfor %}
                {% else %}
                <div class="muted sidebar-empty">No projects yet.</div>
                {% endif %}
            </div>
        </aside>

        <!-- RIGHT: main UI -->
        <main class="main">

            {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
            {% for category, message in messages %}
            <div class="flash {{ category }}">
                {{ message }}
            </div>
            {% endfor %}
            {% endif %}
            {% endwith %}


            <div class="row subject-row">

                <form method="get" action="{{ url_for('delete_project', object_name=object_name) }}"
                    onsubmit="return confirm('Really delete {{ object_name }}?');" style="display:inline;">
                    <button type="submit" class="danger">
                        🗑
                    </button>
                </form>

                <form id="save-form" method="get" action="{{ url_for('save', object_name=object_name) }}"
                    style="display:inline;" onsubmit="syncSubjectToSaveForm()">

                    <input type="hidden" name="subject" id="save-subject">
                    <input type="hidden" name="index" value="{{ index }}">
                    <input type="hidden" name="step" value="{{ step_id }}">

                    <button type="submit">
                        💾
                    </button>
                </form>

                <form method="get" action="{{ url_for('auto_generate_subject', object_name=object_name) }}"
                    style="display:inline;">
                    <button type="submit">
                        🪄
                    </button>
                </form>

                <input type="text" name="subject" id="subject" placeholder="Project subject..."
                    value="{{ subject or '' }}" form="main-form" class="subject-input">

                <label class="muted subject-label" for="subject">
                    {{ object_name }} | {{ step_id }} | {{ index }}
                </label>
            </div>

            <form method="get" action="{{ url_for('submit', object_name=object_name) }}" id="main-form">
                <input type="hidden" name="index" value="{{ index }}">
                <input type="hidden" name="step" value="{{ step_id }}">

                {% if top_requirement %}
                <div class="card">
                    <!-- step content -->
                    <div class="radio-item">
                        <div class="radio-content">
                            <div class="muted">Objective |

                                <button type="submit" class="btn-small" form="main-form"
                                    formaction="{{ url_for('save_objective', object_name=object_name, index=index, step=step.id) }}"
                                    formmethod="post" title="Save objective">
                                    💾
                                </button>

                            </div>
                            <textarea name="top-objective" class="objective-edit" rows="8"
                                form="main-form">{{ top_requirement.objective  }}</textarea>
                        </div>
                    </div>
                </div>
                {% endif %}

                {% if step %}
                <div class="card">
                    <div class="radio-item">
                        <div class="radio-content">
                            <div class="muted">
                                Step |
                                <a href="{{ url_for('open_project', object_name=object_name, step=step.id) }}">
                                    {{ step.id }}
                                </a>
                                | {{ step.icon }} |

                                <button type="submit" class="btn-small" form="main-form"
                                    formaction="{{ url_for('save_step', object_name=object_name, index=index, step=step.id) }}"
                                    formmethod="post" title="Save step">
                                    💾
                                </button>

                            </div>

                            <textarea name="step_content" class="step-edit" rows="8" form="main-form"
                                data-step-id="{{ step.id }}">{{ step.content }}</textarea>

                        </div>
                    </div>
                </div>
                {% endif %}


                <label class="muted">Objective</label>
                <textarea name="objective" placeholder="Type here..." id="objective-text" rows="4"></textarea>

                <div class="row">

                    <select name="mode" id="mode-select" class="combo">
                        <option value="none">🟰</option>
                        <option value="ai" selected>🪄</option>
                        <option value="two">2️⃣</option>
                        <option value="three">3️⃣</option>
                        <option value="four">4️⃣</option>
                        <option value="five">5️⃣</option>
                    </select>

                    <button type="submit" id="submit-btn">➕</button>

                    <label class="checkbox">
                        <input type="checkbox" name="remove_thoughts" checked>
                        <span class="muted">🧠 remove thoughts</span>
                    </label>

                </div>

                <hr />

                <div class="row">
                    <button type="submit" formaction="{{ url_for('prev', object_name=object_name) }}" {% if not
                        gui_elements.can_prev %}disabled{% endif %}>
                        ⬅️
                    </button>

                    <span class="muted">{{ gui_elements.index_display }}</span>

                    <button type="submit" formaction="{{ url_for('next', object_name=object_name) }}" {% if not
                        gui_elements.can_next %}disabled{% endif %}>
                        ➡️
                    </button>

                    <button type="submit" formaction="{{ url_for('up', object_name=object_name) }}" {% if not
                        gui_elements.can_up %}disabled{% endif %}>
                        ⬆️
                    </button>

                    <button type="submit" class="danger"
                        formaction="{{ url_for('delete_requirement', object_name=object_name) }}" formmethod="get"
                        onclick="return confirm('Really delete {{ object_name }}/{{ step_id }}/{{ index }}?');" {% if
                        not gui_elements.can_delete %}disabled{% endif %}>
                        🗑
                    </button>
                </div>
            </form>

            {% if requirement %}

            <div class="card">
                <!-- Objective -->
                <div class="radio-item">
                    <div class="radio-content">
                        <div class="muted">Objective</div>
                        <pre>{{ requirement.objective }}</pre>
                    </div>
                </div>
            </div>

            <!-- Replies -->
            {% for step_ in requirement.list_of_steps %}
            <div class="card">
                <div class="radio-item">
                    <div class="radio-content">
                        <div class="muted step-label">Step #{{ loop.index }} |
                            <a href="{{ url_for(
                                    'open_project', 
                                    object_name=object_name, 
                                    step=step_.id) }}">
                                {{ step_.id }}
                            </a>
                            | {{ step_.icon }} |
                            <a class="danger btn-small" href="{{ url_for(
                                'delete_step',
                                object_name=object_name,
                                index=index,
                                step=step_.id,
                                subject=subject) }}"
                                onclick="return confirm('Really delete {{ object_name }}/{{ step_.id }}?');">
                                🗑
                            </a>
                            |
                            <a class="btn-small" href="{{ url_for(
                                'move_step_up',
                                object_name=object_name,
                                index=index,
                                step=step_.id) }}">
                                ⬆️
                            </a>
                            |
                            <a class="btn-small" href="{{ url_for(
                                'move_step_down',
                                object_name=object_name,
                                index=index,
                                step=step_.id) }}">
                                ⬇️
                            </a>

                        </div>
                        <pre>{{ step_.content }}</pre>
                    </div>
                </div>
            </div>
            {% endfor %}

            <div class="card">
                <div class="radio-item">
                    <div class="radio-content">
                        <div class="muted">
                            <a href="{{ url_for(
                                'add_step', 
                                object_name=object_name, 
                                step=step_id, 
                                index=index) }}">
                                add step...
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            {% else %}
            <p class="muted">No requirements yet.</p>
            {% endif %}

            <hr />

            <div class="row footer-row">
                <label class="muted">{{ signature }}</label>
            </div>

            <script src="{{ url_for('static', filename='theme.js') }}"></script>
        </main>

    </div>
</body>

</html>