@using static ConstructorApp.EntityLayer.Entities.Project
@model List<ResultProjectDto>

<section class="section novi-background bg-cover section-lg section-inset-2 bg-gray-100" id="project">
    <div class="container">
        <div class="caption-classic">
            <div class="caption-classic-group">
                <h1 class="caption-classic-title wow fadeInLeft">Proje<span class="font-weight-light">ler</span></h1>
                <p class="caption-classic-text wow fadeInRight">
                    Aşağıda, benzersiz mimari yaklaşımımızla çok sayıda ödüle layık görülen son projelerimize göz atabilirsiniz.
                </p>
            </div>
            <div class="caption-classic-decor wow blurIn"></div>
        </div>

        <!-- Owl Carousel-->
        <div class="owl-carousel owl-style-1" data-autoplay="true" data-autoplay-timeout="10000" data-autoplay-hover-pause="true" data-items="1" data-margin="30" data-xl-margin="90" data-nav="true" data-dots="true" data-mouse-drag="false" data-smart-speed="600">
            @foreach (var project in Model.Where(x => x.IsActive))
            {
                <article class="project-mary">
                    <div class="project-mary-figure">
                        <a href="/projeler/@project.Slug">
                            <img src="@project.CoverUrl" alt="@project.Title" width="775" height="524" />
                        </a>

                        <!-- Ribbon Start -->
                        <div class="ribbon-wrapper">
                            <div class="ribbon
        @(project.Status == ProjectStatus.Completed ? "bg-success text-white" :
          project.Status == ProjectStatus.Planned ? "bg-warning text-white" :
          project.Status == ProjectStatus.UnderConstruction ? "bg-secondary text-dark" :
          "bg-secondary text-white")">
                                @(project.Status == ProjectStatus.Completed ? "Teslimatta" :
                                    project.Status == ProjectStatus.Planned ? "Tanıtımda" :
                                    project.Status == ProjectStatus.UnderConstruction ? "İnşaatta" :
                                    "Durum Belirsiz")
                            </div>
                        </div>
                        <!-- Ribbon End -->




                        <div class="project-mary-link-wrap">
                            <a class="project-mary-link mdi mdi-magnify" data-lightgallery="item" href="@project.CoverUrl">
                                <img src="@project.CoverUrl" alt="@project.Title" width="775" height="524" />
                            </a>
                        </div>
                    </div>

                    <div class="project-mary-content">
                        <ul class="project-mary-panel">
                            <li class="project-mary-panel-item">
                                <time class="project-mary-time" datetime="@project.Date.ToString("yyyy-MM-dd")">
                                    @project.Date.ToString("MMMM dd, yyyy")
                                </time>
                            </li>
                            <li class="project-mary-panel-item">
                                <div class="project-mary-tag">@project.Title</div>
                            </li>
                        </ul>
                        <h3 class="project-mary-title">
                            <a href="/projeler/@project.Slug">@project.Location</a>
                        </h3>
                        <p class="project-mary-text">@project.ShortDescription</p>
                    </div>
                </article>
            }
        </div>
    </div>
</section>

<style>
    .ribbon-wrapper {
        position: absolute;
        top: 0px; /* Görselin içine doğru yukarıdan mesafe */
        right: 0px; /* Görselin içine doğru sağdan mesafe */
        overflow: hidden;
        width: 100px;
        height: 100px;
        z-index: 10;
    }

    .ribbon {
        position: absolute;
        display: block;
        width: 140px; /* Ribbon genişliği */
        padding: 10px 0; /* Ribbon yüksekliği */
        font-size: 16px; /* Yazı boyutu */
        text-align: center;
        color: #fff;
        transform: rotate(45deg); /* Sağ üst köşeden çapraz */
        top: 20px; /* Ribbon'un görselin içine kayması için ayar */
        right: -30px; /* Görselin içine konumlandırma */
        z-index: 11;
    }

        .ribbon.bg-success {
            background-color: #28a745 !important;
        }

        .ribbon.bg-warning {
            background-color: #ffc107 !important;
        }

        .ribbon.bg-info {
            background-color: #17a2b8 !important;
        }

        .ribbon.bg-secondary {
            background-color: #6c757d !important;
        }


    .text-secondary {
        color: white !important; /* Tüm text-secondary sınıfları beyaz yapılır */
    }
</style>