{% extends "base.html" %}

{% block title %}ThreeFold Dashboard - Welcome{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card shadow-lg border-0">
                <div class="card-body p-5">
                    <div class="text-center mb-5">
                        <h1 class="display-4 fw-bold text-primary">Welcome to ThreeFold Dashboard</h1>
                        <p class="lead text-muted">Your central hub for managing your ThreeFold experience</p>
                    </div>

                    <div class="row mb-5 align-items-center">
                        <div class="col-md-6 text-center">
                            <img src="/static/images/logo_light.png" alt="ThreeFold Logo" class="img-fluid" style="max-width: 300px;">
                        </div>
                        <div class="col-md-6">
                            <h2>Access Your Dashboard</h2>
                            <p class="mb-4">The ThreeFold Dashboard gives you all the tools to manage your resources, monitor your nodes, deploy applications, and more - all in one place.</p>
                            
                            <div class="d-grid gap-3">
                                <a href="/login" class="btn btn-primary btn-lg">
                                    <i class="bi bi-box-arrow-in-right me-2"></i> Log In
                                </a>
                                {% if gitea_enabled == false %}
                                <a href="/register" class="btn btn-outline-primary btn-lg">
                                    <i class="bi bi-person-plus me-2"></i> Register
                                </a>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <div class="row mt-5">
                        <div class="col-12">
                            <h2 class="text-center mb-4">What You Can Do in Your Dashboard</h2>
                        </div>
                        <div class="col-md-3">
                            <div class="card h-100 border-0 shadow-sm">
                                <div class="card-body text-center">
                                    <div class="display-4 mb-3 text-primary">
                                        <i class="bi bi-person"></i>
                                    </div>
                                    <h5>As a User</h5>
                                    <p>Deploy applications, manage slices, monitor costs</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card h-100 border-0 shadow-sm">
                                <div class="card-body text-center">
                                    <div class="display-4 mb-3 text-success">
                                        <i class="bi bi-hdd-rack"></i>
                                    </div>
                                    <h5>As a Farmer</h5>
                                    <p>Manage nodes, configure slices, set pricing</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card h-100 border-0 shadow-sm">
                                <div class="card-body text-center">
                                    <div class="display-4 mb-3 text-info">
                                        <i class="bi bi-app"></i>
                                    </div>
                                    <h5>As an App Provider</h5>
                                    <p>Offer applications, monitor deployments</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card h-100 border-0 shadow-sm">
                                <div class="card-body text-center">
                                    <div class="display-4 mb-3 text-warning">
                                        <i class="bi bi-person-workspace"></i>
                                    </div>
                                    <h5>As a Service Provider</h5>
                                    <p>Offer services, manage maintenance requests</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}