@page "/"
@inject IHttpClientFactory ClientFactory

@attribute [StreamRendering]
@rendermode InteractiveServer

<PageTitle>Home</PageTitle>

<div class="container d-none d-lg-block mt-5 pt-3 pb-5 ps-5 pe-5 ">
    <h1 class="fst-italic fw-light fs-1 font-monospace">Hello, World!</h1>

    <!-- Start of Grid -->
    <div class="row mb-3">
        <div class="col-auto ">
            <img class="card-img rounded-3" style="width: 18em;" src="https://i.pinimg.com/736x/54/63/ed/5463ed9471053712a76c0dd0b301a7ea.jpg" />
        </div>
        <div class="col ">
            <!-- About Me-->
            <div class="row card rounded fs-5 mb-3 p-2 ps-3 pe-3 border-0">
                I am a full-stack web developer with additional
                experience in Data Analysis and Visualization, as well as
                Simulation/VR development, and AI/ML programming.
                I am a friendly team worker with strong analytical, math
                and problem-solving skills that adapts well to an
                Agile/SCRUM environment and development lifecycle.
            </div> 

            <div class="row">
                <!-- School Experience -->
                <div class="col ">
                    <div class="card rounded p-2 ps-3 pe-3 border border-1 border-primary">
                        <p class="fs-6 fw-lighter card-subtitle p-0">September 2018 – March 2022</p>
                        <p class="fs-5 card-title m-0">B.S. in Computer Science</p>
                        <p class="fs-6 fw-lighter card-subtitle">Oregon State University</p>
                        <p class="fs-6 fw-lighter card-subtitle">Graduated Cum Laude</p>
                        <p class="fs-6 fw-lighter card-subtitle">Dean’s List: Fall 2020, Fall 2021</p>
                        <p class="fs-6 fw-lighter card-subtitle">Final GPA: 3.33</p>

                        <!-- Courses -->
                        <label class="text-decoration-underline fw-semibold">Courses</label>
                        <div class="overflow-auto" style="height: auto; max-height: 12rem">
                            <ul class="list-group list-group-flush">
                                @if (courses == null)
                                {
                                    <div>Loading...</div>
                                }
                                else
                                {
                                    <ul class="list-group list-group-flush">
                                        @foreach (var course in courses)
                                        {
                                            <li class="list-group-item">@course</li>
                                        }
                                    </ul>
                                }
                            </ul> 
                        </div>


                    </div>
@*                     <div class="ps-3 pe-3">
                        <ul class="list-group list-group-flush">
                            <li class="">Organized</li>
                            <li class="">Responsible</li>
                            <li class="">Meticulous</li>
                            <li class="">Analytical</li>
                            <li class="">Self-motivating</li>
                        </ul>
                    </div> *@
                </div>

                <!--Skills \ Languages-->
                <div class="col ">
                    <div class="bg-white rounded p-2 border border-1 border-primary" >
                        <div class="card-header">
                            <label class="text-decoration-underline fw-semibold">Skills \ Languages</label>
                            
                        </div>
                        <div class="overflow-auto" style="max-height: 20rem">
                            @if (skills == null)
                            {
                                <div>Loading...</div>
                            }
                            else
                            {
                                <ul class="list-group list-group-flush">
                                    @foreach (var skill in skills)
                                    {
                                        <li class="list-group-item">@skill</li>
                                    }
                                </ul>
                            }
                        </div>
                    </div>
                </div>

                <!-- Tools -->
                <div class="col ">
                    <div class="bg-white rounded p-2 border border-1 border-primary">
                        <div class="card-header">
                            
                            <label class="text-decoration-underline fw-semibold">Tools</label>

                        </div>
                        <div class="overflow-auto" style="max-height: 20rem">
                            @if (tools == null)
                            {
                                <div>Loading...</div>
                            }
                            else
                            {
                                <ul class="list-group list-group-flush">
                                    @foreach (var tool in tools)
                                    {
                                        <li class="list-group-item">@tool</li>
                                    }
                                </ul>
                            }
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="row ">
        <div class="col card border-0 rounded rounded-4 pt-3 pb-3">
            <!-- Button Bay-->
            <div class="row ">
                <div class="d-grid gap-2 d-md-flex justify-content-md-around">
                    <button class="btn rounded-4 w-25 @(isExperience ? "btn-primary" : "btn-outline-primary")" type="button" @onclick="() => ToggleExperience()">Experience</button>
                    <button class="btn rounded-4 w-25 @(isProjects ? "btn-primary" : "btn-outline-primary")" type="button" @onclick="() => ToggleProjects()">Projects</button>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    @if (isExperience)
                    {
                        <div class="row justify-content-md-center fst-italic fs-1">Experience</div>
                            <div class="row card">
                                <div>Stuff</div>
                            </div>
                    }
                    else if (isProjects)
                    {
                        <div class="row justify-content-md-center fst-italic fs-1">Projects</div>
                            <div class="row card">
                                <div>Stuff</div>
                            </div>
                    
                    }
                </div>
            </div>
        </div>
    </div>

</div>

<!-- Desktop B: Tablet View -->
<div class="container d-none d-md-block d-lg-none mt-4 pt-3 pb-4 ">
    <h1 class="fst-italic fw-light fs-1 font-monospace">Hello, World!</h1>

    <div class="row">
        <div class="card rounded p-3 border-0">
            <div class="clearfix">
                <img src="https://i.pinimg.com/736x/54/63/ed/5463ed9471053712a76c0dd0b301a7ea.jpg"
                     class="mobile-profile float-start me-3 mb-2"
                     style="width: 10em;
                            height: 10em;
                            object-fit: cover;
                            border-radius: 0.5rem;" />

                <p class="fs-6 mb-0">
                    I am a full-stack web developer with additional experience in Data Analysis and Visualization,
                    as well as Simulation/ VR development, and AI/ ML programming. I am a friendly team worker with
                    strong analytical, math and problem-solving skills that adapts well to an Agile/SCRUM environment
                    and development lifecycle.
                </p>
            </div>
        </div>
    </div>

    <div class="row mt-3">
        <!-- School Experience -->
        <div class="col me-1">
            <div class="row bg-white rounded p-2 ps-3 pe-3 border border-1 border-primary">
                <p class="fs-6 fw-lighter card-subtitle p-0">September 2018 – March 2022</p>
                <p class="fs-5 card-title m-0 p-0">B.S. in Computer Science</p>
                <p class="fs-6 fw-lighter card-subtitle p-0">Oregon State University</p>
                <p class="fs-6 fw-lighter card-subtitle p-0">Graduated Cum Laude</p>
                <p class="fs-6 fw-lighter card-subtitle p-0">Dean’s List: Fall 2020, Fall 2021</p>
                <p class="fs-6 fw-lighter card-subtitle p-0">Final GPA: 3.33</p>

                <!-- Courses -->
                <label class="text-decoration-underline p-0">Courses</label>
                <div class="overflow-auto p-0" style="max-height: 10rem">
                    <ul class="list-group list-group-flush">
                        @if (courses == null)
                        {
                            <div>Loading...</div>
                        }
                        else
                        {
                            <ul class="list-group list-group-flush">
                                @foreach (var course in courses)
                                {
                                    <li class="list-group-item">@course</li>
                                }
                            </ul>
                        }
                    </ul>
                </div>
            </div
        </div>

        
        <div class="col ms-1">
            <!--Skills \ Languages-->
            <div class="row bg-white rounded p-2 border border-1 border-primary mb-2">
                <div class="card-header">
                    <label class="text-decoration-underline">Skills \ Languages</label>

                </div>
                <div class="overflow-auto p-0" style="max-height: 8rem">
                    @if (skills == null)
                    {
                        <div>Loading...</div>
                    }
                    else
                    {
                        <ul class="list-group list-group-flush">
                            @foreach (var skill in skills)
                            {
                                <li class="list-group-item">@skill</li>
                            }
                        </ul>
                    }
                </div>
            </div>
            <!-- Tools -->
            <div class="row bg-white rounded p-2 border border-1 border-primary">
                <div class="card-header">

                    <label class="text-decoration-underline">Tools</label>

                </div>
                <div class="overflow-auto p-0" style="max-height: 8rem">
                    @if (tools == null)
                    {
                        <div>Loading...</div>
                    }
                    else
                    {
                        <ul class="list-group list-group-flush">
                            @foreach (var tool in tools)
                            {
                                <li class="list-group-item">@tool</li>
                            }
                        </ul>
                    }
                </div>
            </div>
        </div>
    </div>
</div>



<!-- Desktop C: Mobile View -->
<div class="container card border-0 d-block d-md-none mx-auto mt-4 shadow-sm pb-2">
    <h1 class="fst-italic fw-light fs-1 font-monospace">Hello, World!</h1>

    <div class="row">
        <div class="card p-3 border-0">
            <div class="clearfix">
                <img src="https://i.pinimg.com/736x/54/63/ed/5463ed9471053712a76c0dd0b301a7ea.jpg"
                     class="mobile-profile float-start me-3 mb-2" />

                <p class="fs-6 mb-0">
                    I am a full-stack web developer with additional experience in Data Analysis and Visualization,
                    as well as Simulation/ VR development, and AI/ ML programming. I am a friendly team worker with
                    strong analytical, math and problem-solving skills that adapts well to an Agile/SCRUM environment
                    and development lifecycle.
                </p>
            </div>
        </div>
    </div>

@*     <div class="row mb-3 bg-info rounded rounded-5 pt-1 pb-1">
        <p class="fw-lighter fs-6 text-nowrap p-0 m-auto text-center text-white">
            Organized • Responsible • Meticulous • Analytical • Self-motivating
        </p>
    </div> *@
    
    <hr class="text-primary" />

    <div class="row mb-3 ms-2 me-2 ">
        <div class="card p-2 ps-3 pe-3 border border-1 border-primary">
            <p class="fs-6 fw-lighter card-subtitle m-0">September 2018 – March 2022</p>
            <p class="fs-4 card-title m-0">B.S. in Computer Science</p>
            <p class="fs-6 fw-lighter card-subtitle">Oregon State University</p>
            <p class="fs-6 fw-lighter card-subtitle">Graduated Cum Laude</p>
            <p class="fs-6 fw-lighter card-subtitle">Dean’s List: Fall 2020, Fall 2021</p>
            <p class="fs-6 fw-lighter card-subtitle">Final GPA: 3.33</p>
        </div>
    </div>

    <div class="row mb-3 ms-2 me-2">
        <div class="bg-primary-subtle rounded p-2 border-0">
            <div class="card-header text-bg-primary text-light fs-3">
                Skills \ Languages
            </div>
            <div class="overflow-auto" style="max-height: 15rem">
                @if (skills == null)
                            {
                                <div>Loading...</div>
                            }
                            else
                            {
                                <ul class="list-group list-group-flush">
                                    @foreach (var skill in skills)
                                    {
                                        <li class="list-group-item">@skill</li>
                                    }
                                </ul>
                            }
            </div>
        </div>
    </div>

    <div class="row mb-3 ms-2 me-2">
        <div class="bg-primary-subtle rounded p-2 border-0">
            <div class="card-header text-bg-primary text-light fs-3">
                Technology
            </div>
            <div class="overflow-auto" style="max-height: 15rem">
                @if (tools == null)
                {
                    <div>Loading...</div>
                }
                else
                {
                    <ul class="list-group list-group-flush">
                        @foreach (var tool in tools)
                        {
                            <li class="list-group-item">@tool</li>
                        }
                    </ul>
                }
            </div>
        </div>
    </div>

</div>