@{
    ViewData["Title"] = "About";
}

<div class="row">
    <div class="col-12">
        <h2><i class="fas fa-info-circle"></i> About BCards Infrastructure</h2>
        <hr>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5>Infrastructure Overview</h5>
            </div>
            <div class="card-body">
                <h6>Architecture Components:</h6>
                <ul>
                    <li><strong>Load Balancer:</strong> NGINX reverse proxy with SSL termination</li>
                    <li><strong>Application Servers:</strong> 2x OCI instances running Docker containers</li>
                    <li><strong>Container Orchestration:</strong> Docker Swarm for service management</li>
                    <li><strong>Domain:</strong> bcards.site with automatic SSL certificates</li>
                    <li><strong>Registry:</strong> Private container registry at registry.redecarneir.us</li>
                </ul>

                <h6 class="mt-4">Key Features:</h6>
                <ul>
                    <li>Zero-downtime deployments</li>
                    <li>Automatic health checks and failover</li>
                    <li>Centralized logging and monitoring</li>
                    <li>SSL/TLS encryption</li>
                    <li>Horizontal scaling capability</li>
                </ul>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5>Server Information</h5>
            </div>
            <div class="card-body">
                <p><strong>Current Server:</strong></p>
                <div class="alert alert-primary">
                    @ViewBag.ServerName
                </div>
                
                <p><strong>Container Host:</strong></p>
                <div class="alert alert-secondary">
                    @ViewBag.Hostname
                </div>
                
                <p><strong>Timestamp:</strong></p>
                <div class="alert alert-info">
                    @ViewBag.Timestamp
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-network-wired"></i> Network Architecture</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>Production Servers:</h6>
                        <ul class="list-group">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                Server 1 (Manager)
                                <span class="badge bg-primary rounded-pill">129.153.123.92</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                Server 2 (Worker)
                                <span class="badge bg-secondary rounded-pill">129.146.116.218</span>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6>Service Endpoints:</h6>
                        <ul class="list-group">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                Public Domain
                                <span class="badge bg-success rounded-pill">bcards.site</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                Container Registry
                                <span class="badge bg-warning rounded-pill">registry.redecarneir.us</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>