@model List<ResultWorkProcessDto>

<section class="section novi-background bg-cover section-xl bg-gray-800 decoration-1" id="work-process">
    <div class="tabs-custom container" id="tabs-1" data-view-triggerable="true">
        <div class="row row-30 row-md-40 justify-content-lg-between">
            <div class="col-lg-5">
                <h6 class="title-style-1 wow fadeInLeft">Yeni bir eve giden 4 adım</h6>
                <h1 class="wow fadeInLeft" data-wow-delay=".05s">Bunu Nasıl<br class="d-none d-lg-block">Yapıyoruz <span class="font-weight-light">?</span></h1>

                <!-- Tab Panes -->
                <div class="tab-content wow fadeInLeft" data-wow-delay=".1s">
                    @for (int i = 0; i < Model.Count; i++)
                    {
                        var item = Model[i];
                        <div class="tab-pane fade @(i == 0 ? "show active" : "")" id="tabs-1-@(i+1)">
                            <h3 class="title-style-1">@item.Title</h3>
@*                             <p>@item.Info</p> *@
                            <p>@item.SubTitle</p>
                        </div>
                    }
                </div>
            </div>

            <div class="col-lg-7 col-xl-6">
                <div class="inset-xl-left-35">
                    <!-- Tab Navigation -->
                    <ul class="nav nav-style-1">
                        @for (int i = 0; i < Model.Count; i++)
                        {
                            var item = Model[i];
                            <li class="nav-item wow blurIn" role="presentation" data-wow-delay=".0@(i * 5)s">
                                <a class="nav-link @(i == 0 ? "active" : "")" href="#tabs-1-@(i+1)" data-toggle="tab">@item.Info</a>
                            </li>
                        }
                    </ul>

                    <!-- Images -->
                    <div class="project-creative wow blurIn">
                        @for (int i = 0; i < Model.Count; i++)
                        {
                            var item = Model[i];
                            <div class="project-creative-figure @(i == 0 ? "active" : "")" data-view-trigger="#tabs-1-@(i + 1)">
                                <img src="@item.ImageUrl" alt="" width="531" height="327" />
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
