@model IEnumerable<atakanozbancom.Models.classes.MyProjectsVM>

<p class="text-center">
    @(atakanozbancom.App_GlobalResources.Resource.MyProjectsP1)
    <a href="https://git.atakanozban.com/gitea" style="text-decoration:none;color:darkgrey;" target="_blank">
        @atakanozbancom.App_GlobalResources.Resource.Gitea
    </a>
    @atakanozbancom.App_GlobalResources.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;
    }

    .carousel-indicators {
        z-index: 6;
    }
</style>

@foreach (var p in Model)
{
    var media = p.medias ?? new List<atakanozbancom.Models.classes.ProjectMediaVM>();
    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">

                @if (hasMultiple)
                {
                    <div class="carousel-indicators">
                        @for (int i = 0; i < media.Count; i++)
                        {
                            <button type="button"
                                    data-bs-target="#@carouselId"
                                    data-bs-slide-to="@i"
                                    class="@(i == 0 ? "active" : "")"
                                    aria-current="@(i == 0 ? "true" : null)"
                                    aria-label="Slide @(i + 1)"></button>
                        }
                    </div>
                }

                <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="false">

                            @if (m.type == "iframe")
                            {
                                <div class="carousel-media-iframe">
                                    <iframe src="@m.url"
                                            loading="lazy"
                                            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 if (m.type == "image")
                            {
                                <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"></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"></span>
                                        </button>
                                    }
                                </div>
                            }
                            @*else if (m.type == "video")
                            {
                                <video class="d-block w-100" controls preload="metadata">
                                    <source src="@m.url" type="video/mp4" />
                                </video>
                            }*@
                            @*else if (m.type == "document")
                            {
                                <div class="ratio ratio-4x3">
                                    <iframe src="@m.url"></iframe>
                                </div>
                                <div class="text-center mt-2">
                                    <a href="@m.url" target="_blank">Open document</a>
                                </div>
                            }*@

                        </div>
                    }

                </div>
            </div>
        }

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

    </div>
}