{% extends "base.html" %}

{% block title %}Repositories - GitHub to Gitea Mirror{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <h1>Repositories</h1>
        <div class="d-flex justify-content-between mb-3">
            <div>
                <a href="/" class="btn btn-secondary">Back to Home</a>
                <a href="/add" class="btn btn-success ms-2">Add Repository</a>
            </div>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-outline-primary active" id="list-view-btn">List View</button>
                <button type="button" class="btn btn-outline-primary" id="card-view-btn">Card View</button>
            </div>
        </div>
        
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Mirrored Repositories</h5>
                
                {% if repos %}
                <!-- List View -->
                <div class="table-responsive" id="list-view">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>GitHub Repository</th>
                                <th>Gitea Repository</th>
                                <th>Mirror Type</th>
                                <th>Mirror Interval</th>
                                <th>Last Mirrored</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for repo in repos %}
                            <tr>
                                <td>
                                    <a href="https://github.com/{{ repo.github_repo }}" target="_blank">
                                        {{ repo.github_repo }}
                                    </a>
                                </td>
                                <td>
                                    <a href="{{ gitea_url }}/{{ repo.gitea_owner }}/{{ repo.gitea_repo }}" target="_blank">
                                        {{ repo.gitea_owner }}/{{ repo.gitea_repo }}
                                    </a>
                                </td>
                                <td>
                                    {% if repo.is_mirror %}
                                    <span class="badge bg-success">Pull Mirror</span>
                                    {% else %}
                                    <span class="badge bg-warning">Legacy</span>
                                    {% endif %}
                                </td>
                                <td>{{ repo.mirror_interval }}</td>
                                <td>{{ repo.last_mirror_date }}</td>
                                <td>
                                    {% if repo.last_mirror_status == 'success' %}
                                    <div class="d-flex align-items-center">
                                        <span class="badge bg-success" data-bs-toggle="tooltip" title="Mirror completed successfully">Success</span>
                                    </div>
                                    {% elif repo.last_mirror_status == 'warning' %}
                                    <div class="d-flex align-items-center">
                                        <span class="badge bg-warning" data-bs-toggle="tooltip" title="Mirror completed with warnings">Warning</span>
                                    </div>
                                    {% if repo.last_mirror_messages and repo.last_mirror_messages|length > 0 %}
                                    <div class="small {% if repo.last_mirror_status == 'error' %}text-danger{% elif repo.last_mirror_status == 'warning' %}text-warning{% endif %} mt-1">
                                        {% if repo.last_mirror_log %}
                                        <a href="/logs/{{ repo.last_mirror_log }}" class="{% if repo.last_mirror_status == 'error' %}text-danger{% elif repo.last_mirror_status == 'warning' %}text-warning{% endif %}" data-bs-toggle="tooltip" title="Click to view log">
                                            {{ repo.last_mirror_messages[0] }}
                                        </a>
                                        {% else %}
                                        {{ repo.last_mirror_messages[0] }}
                                        {% endif %}
                                        {% if repo.last_mirror_messages|length > 1 %}
                                        <span class="text-muted">and {{ repo.last_mirror_messages|length - 1 }} more issues</span>
                                        {% endif %}
                                    </div>
                                    {% endif %}
                                    {% elif repo.last_mirror_status == 'error' %}
                                    <div class="d-flex align-items-center">
                                        <span class="badge bg-danger" data-bs-toggle="tooltip" title="Mirror completed with errors">Error</span>
                                    </div>
                                    {% if repo.last_mirror_messages and repo.last_mirror_messages|length > 0 %}
                                    <div class="small {% if repo.last_mirror_status == 'error' %}text-danger{% elif repo.last_mirror_status == 'warning' %}text-warning{% endif %} mt-1">
                                        {% if repo.last_mirror_log %}
                                        <a href="/logs/{{ repo.last_mirror_log }}" class="{% if repo.last_mirror_status == 'error' %}text-danger{% elif repo.last_mirror_status == 'warning' %}text-warning{% endif %}" data-bs-toggle="tooltip" title="Click to view log">
                                            {{ repo.last_mirror_messages[0] }}
                                        </a>
                                        {% else %}
                                        {{ repo.last_mirror_messages[0] }}
                                        {% endif %}
                                        {% if repo.last_mirror_messages|length > 1 %}
                                        <span class="text-muted">and {{ repo.last_mirror_messages|length - 1 }} more issues</span>
                                        {% endif %}
                                    </div>
                                    {% endif %}
                                    {% else %}
                                    <span class="badge bg-secondary">Unknown</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <a href="/repos/{{ repo.gitea_owner }}/{{ repo.gitea_repo }}/config" class="btn btn-sm btn-primary">Configure</a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                <!-- Card View -->
                <div class="row" id="card-view" style="display: none;">
                    {% for repo in repos %}
                    <div class="col-md-4 mb-3">
                        <div class="card h-100 {% if repo.last_mirror_status == 'error' %}border-danger{% elif repo.last_mirror_status == 'warning' %}border-warning{% endif %}">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="card-title mb-0">
                                    {{ repo.gitea_owner }}/{{ repo.gitea_repo }}
                                </h5>
                                {% if repo.last_mirror_status == 'success' %}
                                <span class="badge bg-success" data-bs-toggle="tooltip" title="Mirror completed successfully">Success</span>
                                {% elif repo.last_mirror_status == 'warning' %}
                                <span class="badge bg-warning" data-bs-toggle="tooltip" title="Mirror completed with warnings">Warning</span>
                                {% elif repo.last_mirror_status == 'error' %}
                                <span class="badge bg-danger" data-bs-toggle="tooltip" title="Mirror completed with errors">Error</span>
                                {% else %}
                                <span class="badge bg-secondary">Unknown</span>
                                {% endif %}
                            </div>
                            <div class="card-body">
                                <p class="card-text">
                                    <strong>GitHub:</strong> 
                                    <a href="https://github.com/{{ repo.github_repo }}" target="_blank">
                                        {{ repo.github_repo }}
                                    </a>
                                </p>
                                <p class="card-text">
                                    <strong>Gitea:</strong> 
                                    <a href="{{ gitea_url }}/{{ repo.gitea_owner }}/{{ repo.gitea_repo }}" target="_blank">
                                        {{ repo.gitea_owner }}/{{ repo.gitea_repo }}
                                    </a>
                                </p>
                                <p class="card-text">
                                    <strong>Type:</strong> 
                                    {% if repo.is_mirror %}
                                    <span class="badge bg-success">Pull Mirror</span>
                                    {% else %}
                                    <span class="badge bg-warning">Legacy</span>
                                    {% endif %}
                                </p>
                                <p class="card-text">
                                    <strong>Interval:</strong> {{ repo.mirror_interval }}
                                </p>
                                <p class="card-text">
                                    <strong>Last Mirrored:</strong> {{ repo.last_mirror_date }}
                                </p>
                                {% if repo.last_mirror_messages and repo.last_mirror_messages|length > 0 %}
                                <div class="alert {% if repo.last_mirror_status == 'error' %}alert-danger{% elif repo.last_mirror_status == 'warning' %}alert-warning{% else %}alert-secondary{% endif %} mt-2 p-2">
                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <strong>Mirror Messages:</strong>
                                    </div>
                                    <ul class="mb-0 ps-3">
                                        {% for message in repo.last_mirror_messages %}
                                        <li>
                                            {% if repo.last_mirror_log %}
                                            <a href="/logs/{{ repo.last_mirror_log }}" class="{% if repo.last_mirror_status == 'error' %}text-danger{% elif repo.last_mirror_status == 'warning' %}text-warning{% endif %}" data-bs-toggle="tooltip" title="Click to view log">
                                                {{ message }}
                                            </a>
                                            {% else %}
                                            {{ message }}
                                            {% endif %}
                                        </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                {% endif %}
                            </div>
                            <div class="card-footer d-flex justify-content-between">
                                <a href="/repos/{{ repo.gitea_owner }}/{{ repo.gitea_repo }}/config" class="btn btn-primary">Configure</a>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="alert alert-info">
                    No mirrored repositories found.
                    <div class="mt-3">
                        <a href="/add" class="btn btn-success">Add Your First Repository</a>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const listViewBtn = document.getElementById('list-view-btn');
        const cardViewBtn = document.getElementById('card-view-btn');
        const listView = document.getElementById('list-view');
        const cardView = document.getElementById('card-view');
        
        // Initialize tooltips
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
        
        // Check if there's a saved preference
        const viewPreference = localStorage.getItem('repoViewPreference') || 'list';
        
        // Set initial view based on preference
        if (viewPreference === 'card') {
            listView.style.display = 'none';
            cardView.style.display = 'flex';
            listViewBtn.classList.remove('active');
            cardViewBtn.classList.add('active');
        }
        
        // Switch to list view
        listViewBtn.addEventListener('click', function() {
            listView.style.display = 'block';
            cardView.style.display = 'none';
            listViewBtn.classList.add('active');
            cardViewBtn.classList.remove('active');
            localStorage.setItem('repoViewPreference', 'list');
        });
        
        // Switch to card view
        cardViewBtn.addEventListener('click', function() {
            listView.style.display = 'none';
            cardView.style.display = 'flex';
            listViewBtn.classList.remove('active');
            cardViewBtn.classList.add('active');
            localStorage.setItem('repoViewPreference', 'card');
        });
    });
</script>
{% endblock %}