{% extends "base.html" %}

{% block title %}Editor Dashboard{% endblock %}

{% block content %}
<div class="editor-dashboard">
    <div class="dashboard-header">
        <h1>Editor Dashboard</h1>
    </div>

    {% for garden_data in gardens %}
    <div class="garden-section">
        <h2 class="garden-title">{{ garden_data.garden.title }}</h2>

        <div class="articles-list">
            {% if garden_data.articles %}
            <table class="articles-table">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Created</th>
                        <th>Published</th>
                        <th>Updated</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for article in garden_data.articles %}
                    <tr>
                        <td>
                            <a href="{{ url_for('main.article', garden_slug=garden_data.garden.slug, article_path=article.slug) }}">
                                {{ article.metadata.title }}
                            </a>
                        </td>
                        <td>{{ article.metadata.created_date }}</td>
                        <td>{{ article.metadata.published_date }}</td>
                        <td>{{ article.metadata.updated_date }}</td>
                        <td class="actions">
                            <a href="{{ url_for('editor.edit', garden_slug=garden_data.garden.slug, article_path=article.slug) }}" class="btn btn-sm">Edit</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p class="empty-message">No articles in this garden yet.</p>
            {% endif %}
        </div>
    </div>
    {% endfor %}
</div>

<style>
.garden-section {
    margin-bottom: 3rem;
}

.garden-title {
    color: var(--primary-color);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.empty-message {
    color: var(--text-light);
    font-style: italic;
    padding: 2rem;
    text-align: center;
}
</style>
{% endblock %}