@using Resources
@model IEnumerable<atakanozbancom.Models.classes.MyProjectVM>

<p class="text-center">
    @(Resource.MyProjectsP1)
    <a href="https://link.atakanozban.com/github" style="text-decoration:none;color:darkgrey;" target="_blank">
        @Resource.GitHub
    </a>
    @Resource.MyProjectsP1_1
</p>

<style>
    .carousel-media-iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
        position: relative;
        overflow: hidden;
        background: #000;
    }

        .carousel-media-iframe iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

    .carousel-media-image {
        width: 100%;
        position: relative;
        background: transparent;
        overflow: hidden;
    }

        .carousel-media-image img {
            display: block;
            width: 100%;
            height: auto;
            object-fit: contain;
        }

    .media-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 4rem;
        height: 4rem;
        opacity: 0.9;
        bottom: auto;
        z-index: 5;
    }

    .carousel-control-prev {
        left: 1rem;
    }

    .carousel-control-next {
        right: 1rem;
    }
</style>

@foreach (var p in Model)
{
    var media = new List<(string Type, string Url)>();

    if (!string.IsNullOrWhiteSpace(p.iframe))
    {
        media.Add(("iframe", p.iframe));
    }

    if (!string.IsNullOrWhiteSpace(p.image))
    {
        media.Add(("image", p.image));
    }

    var carouselId = $"projCarousel_{p.id}";
    var hasMultiple = media.Count > 1;

    <div class="container py-4">

        @if (media.Count > 0)
        {
            <div id="@carouselId" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">

                    @for (int i = 0; i < media.Count; i++)
                    {
                        var m = media[i];

                        <div class="carousel-item @(i == 0 ? "active" : "")"
                             data-bs-interval="@(m.Type == "iframe" ? "false" : "5000")">

                            @if (m.Type == "iframe")
                            {
                                <div class="carousel-media-iframe">
                                    <iframe src="@m.Url"
                                            loading="lazy"
                                            referrerpolicy="no-referrer-when-downgrade"
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                            allowfullscreen></iframe>

                                    @if (hasMultiple)
                                    {
                                        <button class="carousel-control-prev media-arrow"
                                                type="button"
                                                data-bs-target="#@carouselId"
                                                data-bs-slide="prev">
                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                            <span class="visually-hidden">Previous</span>
                                        </button>

                                        <button class="carousel-control-next media-arrow"
                                                type="button"
                                                data-bs-target="#@carouselId"
                                                data-bs-slide="next">
                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                            <span class="visually-hidden">Next</span>
                                        </button>
                                    }
                                </div>
                            }
                            else
                            {
                                <div class="carousel-media-image">
                                    <img src="@m.Url" alt="@p.title" />

                                    @if (hasMultiple)
                                    {
                                        <button class="carousel-control-prev media-arrow"
                                                type="button"
                                                data-bs-target="#@carouselId"
                                                data-bs-slide="prev">
                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                            <span class="visually-hidden">Previous</span>
                                        </button>

                                        <button class="carousel-control-next media-arrow"
                                                type="button"
                                                data-bs-target="#@carouselId"
                                                data-bs-slide="next">
                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                            <span class="visually-hidden">Next</span>
                                        </button>
                                    }
                                </div>
                            }

                        </div>
                    }

                </div>
            </div>
        }

        <h3 class="mt-3 text-center">@p.title</h3>
        <p class="lead mb-5 text-center">@Html.Raw(p.description)</p>

    </div>
}