{% extends "base.html" %}

{% block title %}Home - SEREACT Web Client{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="jumbotron bg-primary text-white p-5 rounded mb-4">
            <h1 class="display-4">
                <i class="fas fa-images"></i> SEREACT Web Client
            </h1>
            <p class="lead">Secure Image Management with AI-Powered Search</p>
            <hr class="my-4">
            <p>Upload, organize, and search your images using advanced AI embeddings and vector similarity.</p>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6 col-lg-3 mb-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <i class="fas fa-upload fa-3x text-primary mb-3"></i>
                <h5 class="card-title">Upload Images</h5>
                <p class="card-text">Upload and organize your images with metadata and tags.</p>
                <a href="{{ url_for('upload_image') }}" class="btn btn-primary">
                    <i class="fas fa-upload"></i> Upload
                </a>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-3 mb-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <i class="fas fa-search fa-3x text-success mb-3"></i>
                <h5 class="card-title">Search Images</h5>
                <p class="card-text">Find images using AI-powered semantic search capabilities.</p>
                <a href="{{ url_for('search') }}" class="btn btn-success">
                    <i class="fas fa-search"></i> Search
                </a>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-3 mb-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <i class="fas fa-images fa-3x text-info mb-3"></i>
                <h5 class="card-title">Browse Images</h5>
                <p class="card-text">View and manage all your uploaded images in one place.</p>
                <a href="{{ url_for('images') }}" class="btn btn-info">
                    <i class="fas fa-images"></i> Browse
                </a>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-3 mb-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <i class="fas fa-cog fa-3x text-warning mb-3"></i>
                <h5 class="card-title">Management</h5>
                <p class="card-text">Manage teams, users, and API keys for your organization.</p>
                <div class="btn-group-vertical w-100">
                    <a href="{{ url_for('teams') }}" class="btn btn-outline-warning btn-sm mb-1">
                        <i class="fas fa-users"></i> Teams
                    </a>
                    <a href="{{ url_for('users') }}" class="btn btn-outline-warning btn-sm mb-1">
                        <i class="fas fa-user"></i> Users
                    </a>
                    <a href="{{ url_for('api_keys') }}" class="btn btn-outline-warning btn-sm">
                        <i class="fas fa-key"></i> API Keys
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-info-circle"></i> Getting Started
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6><i class="fas fa-rocket"></i> First Time Setup</h6>
                        <ol>
                            <li>Configure your API endpoint in <a href="{{ url_for('config') }}">Settings</a></li>
                            <li>Use <a href="{{ url_for('bootstrap') }}">Bootstrap</a> to create initial team and admin user</li>
                            <li>Start uploading and searching images!</li>
                        </ol>
                    </div>
                    <div class="col-md-6">
                        <h6><i class="fas fa-key"></i> API Configuration</h6>
                        <p>Make sure to:</p>
                        <ul>
                            <li>Set the correct API base URL</li>
                            <li>Have a valid API key</li>
                            <li>Ensure your SEREACT API is running</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-chart-line"></i> Features
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <h6><i class="fas fa-brain text-primary"></i> AI-Powered Search</h6>
                        <p class="small">Search images using natural language queries powered by Google Cloud Vision API embeddings.</p>
                    </div>
                    <div class="col-md-4">
                        <h6><i class="fas fa-shield-alt text-success"></i> Secure Storage</h6>
                        <p class="small">Images are securely stored in Google Cloud Storage with team-based access control.</p>
                    </div>
                    <div class="col-md-4">
                        <h6><i class="fas fa-tags text-info"></i> Rich Metadata</h6>
                        <p class="small">Organize images with descriptions, tags, and automatic metadata extraction.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}