{% extends "base.html" %}

{% block title %}Home - markMyWords{% endblock %}

{% block extra_head %}
<script src="{{ url_for('static', filename='search.js') }}"></script>
{% endblock %}

{% block content %}
<div class="container">
    <section class="search-section">
        <h1>Search Markdown Files</h1>
        <div class="search-box">
            <input 
                type="text" 
                id="searchInput" 
                class="search-input" 
                placeholder="Search across all repositories..."
                autocomplete="off"
            >
            <button class="search-button" onclick="performSearch()">Search</button>
        </div>
        
        <div id="searchResults" class="search-results" style="display: none;">
            <h2>Search Results</h2>
            <div id="resultsList"></div>
        </div>
    </section>

    <section class="repositories-section">
        <h2>Repositories</h2>
        {% if repositories %}
            <div class="repo-grid">
                {% for repo in repositories %}
                <div class="repo-card">
                    <h3>{{ repo.name }}</h3>
                    {% if repo.files %}
                    <div class="file-list">
                        <ul>
                        {% for file in repo.files %}
                            <li>
                                <a href="/view/{{ repo.name }}/{{ file.path }}" class="file-link">
                                    📄 {{ file.name }}
                                </a>
                            </li>
                        {% endfor %}
                        </ul>
                    </div>
                    {% else %}
                    <p class="no-files">No markdown files found</p>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        {% else %}
        <div class="empty-state">
            <p>No repositories configured. Please check your configuration file.</p>
        </div>
        {% endif %}
    </section>
</div>
{% endblock %}