@page
@model Media.JoshHeaps.Net.Pages.LandingModel
@{
    ViewData["Title"] = "Home";
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Media Manager</title>
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/css/landing.css" asp-append-version="true" />
    <script src="~/js/theme.js" asp-append-version="true"></script>
</head>
<body>
    <div class="landing-wrapper">
        <div class="landing-container">
            <div class="landing-header">
                <div class="logo-area">
                    <div class="logo-circle">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                            <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
                            <line x1="12" y1="22.08" x2="12" y2="12"></line>
                        </svg>
                    </div>
                    <h1>Welcome Back</h1>
                    <p class="subtitle">Choose a workspace to continue</p>
                </div>
            </div>

            <div class="cards-grid">
                <a href="/Gallery" class="landing-card">
                    <div class="card-content">
                        <div class="card-icon-wrapper">
                            <div class="card-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                    <circle cx="8.5" cy="8.5" r="1.5"></circle>
                                    <polyline points="21 15 16 10 5 21"></polyline>
                                </svg>
                            </div>
                        </div>
                        <div class="card-text">
                            <h2>Media Storage</h2>
                            <p class="card-description">Upload, organize, and manage your images in folders with sharing capabilities</p>
                        </div>
                    </div>
                    <div class="card-footer">
                        <span class="card-link-text">Open workspace</span>
                        <div class="card-arrow">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="5" y1="12" x2="19" y2="12"></line>
                                <polyline points="12 5 19 12 12 19"></polyline>
                            </svg>
                        </div>
                    </div>
                </a>

                <a href="/NetworkGraph" class="landing-card">
                    <div class="card-content">
                        <div class="card-icon-wrapper">
                            <div class="card-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="3"></circle>
                                    <circle cx="6" cy="18" r="2"></circle>
                                    <circle cx="18" cy="18" r="2"></circle>
                                    <circle cx="18" cy="6" r="2"></circle>
                                    <circle cx="6" cy="6" r="2"></circle>
                                    <line x1="13.5" y1="10.5" x2="16.5" y2="7.5"></line>
                                    <line x1="10.5" y1="10.5" x2="7.5" y2="7.5"></line>
                                    <line x1="10.5" y1="13.5" x2="7.5" y2="16.5"></line>
                                    <line x1="13.5" y1="13.5" x2="16.5" y2="16.5"></line>
                                </svg>
                            </div>
                        </div>
                        <div class="card-text">
                            <h2>Network Graphs</h2>
                            <p class="card-description">Create and visualize network graphs to map relationships and connections</p>
                        </div>
                    </div>
                    <div class="card-footer">
                        <span class="card-link-text">Open workspace</span>
                        <div class="card-arrow">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="5" y1="12" x2="19" y2="12"></line>
                                <polyline points="12 5 19 12 12 19"></polyline>
                            </svg>
                        </div>
                    </div>
                </a>

                @if (Model.IsAdmin)
                {
                    <a href="/Admin" class="landing-card">
                        <div class="card-content">
                            <div class="card-icon-wrapper">
                                <div class="card-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="card-text">
                                <h2>Admin</h2>
                                <p class="card-description">Site administration and management tools</p>
                            </div>
                        </div>
                        <div class="card-footer">
                            <span class="card-link-text">Open workspace</span>
                            <div class="card-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <line x1="5" y1="12" x2="19" y2="12"></line>
                                    <polyline points="12 5 19 12 12 19"></polyline>
                                </svg>
                            </div>
                        </div>
                    </a>

                    <a href="/BlogAdmin" class="landing-card">
                        <div class="card-content">
                            <div class="card-icon-wrapper">
                                <div class="card-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M12 20h9"></path>
                                        <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="card-text">
                                <h2>Blog</h2>
                                <p class="card-description">Create and manage blog posts for your website</p>
                            </div>
                        </div>
                        <div class="card-footer">
                            <span class="card-link-text">Open workspace</span>
                            <div class="card-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <line x1="5" y1="12" x2="19" y2="12"></line>
                                    <polyline points="12 5 19 12 12 19"></polyline>
                                </svg>
                            </div>
                        </div>
                    </a>
                }

                @if (Model.HasMedicalRole)
                {
                    <a href="/MedicalDocs" class="landing-card">
                        <div class="card-content">
                            <div class="card-icon-wrapper">
                                <div class="card-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                        <polyline points="14 2 14 8 20 8"></polyline>
                                        <line x1="12" y1="11" x2="12" y2="17"></line>
                                        <line x1="9" y1="14" x2="15" y2="14"></line>
                                    </svg>
                                </div>
                            </div>
                            <div class="card-text">
                                <h2>Medical Documents</h2>
                                <p class="card-description">Organize medical records, receipts, and notes for the family</p>
                            </div>
                        </div>
                        <div class="card-footer">
                            <span class="card-link-text">Open workspace</span>
                            <div class="card-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <line x1="5" y1="12" x2="19" y2="12"></line>
                                    <polyline points="12 5 19 12 12 19"></polyline>
                                </svg>
                            </div>
                        </div>
                    </a>
                }
            </div>

            <div class="landing-footer">
                <a href="/Profile" class="footer-link">Profile</a>
                <span class="footer-separator">•</span>
                <a href="/Logout" class="footer-link">Logout</a>
            </div>
        </div>
    </div>
</body>
</html>
