Untitled

@inherits Composite.Addons.Mvc.Views.C1FunctionView<Vluchteling.Functions.Block.Projects.ProjectsBlock, Vluchteling.Models.Functions.ProjectsBlockModel>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    @if (!string.IsNullOrEmpty(FunctionModel.Title))
    {
        <div class="title-block">
            <div class="rich-text">
                <div class="title yellow">
                    <h2>@FunctionModel.Title</h2>
                </div>
            </div>
        </div>
    }
    <div class="block projects-block">
        @if (!Model.Projects.Any())
        {
            <div class="project-slider grid shrink flex">
                <div class="col-a-100">
                    <h3>Geen projecten gevonden</h3>
                </div>
            </div>
        }
        else if (Model.Projects.Count > 4)
        {
            <script>
                //<![CDATA[
                $(document).ready(function ()
                {
                    $('.project-slider').slick({
                        centerMode: false,
                        centerPadding: '60px',
                        slidesToShow: 4,
                        swipe: true,
                        responsive: [
                        {
                            breakpoint: 1280,
                            settings: {
                                arrows: true,
                                centerMode: false,
                                slidesToShow: 4
                            }
                        },
                        {
                            breakpoint: 1024,
                            settings: {
                                arrows: true,
                                centerMode: false,
                                slidesToShow: 3
                            }
                        },
                          {
                              breakpoint: 768,
                              settings: {
                                  arrows: true,
                                  centerMode: false,
                                  slidesToShow: 2,
                                  dots: false
                              }
                          },
                          {
                              breakpoint: 480,
                              settings: {
                                  arrows: true,
                                  centerMode: false,
                                  slidesToShow: 1,
                                  dots: false
                              }
                          }
                        ]
                    });
                });
                //]]>
            </script>
            <div class="project-slider grid shrink flex">
                @foreach (var item in Model.Projects)
                {
                    <div class="project-item">
                        <div class="bumper-box block scheme-white">
                            @if (!string.IsNullOrEmpty(item.Image))
                            {
                                <a href="@item.GetInternalUrl()">
                                    <img src="@MediaExtensions.GetMediaUrl(item.Image)?mw=733" alt="@item.Title" class="radius" />
                                </a>
                            }
                            <div class="col-a-100">
                                <div class="bumper-content">
                                    <div class="rich-text">
                                        @item.Title
                                    </div>
                                </div>
                            </div>
                            <div class="bumper-button">
                                <a href="@item.GetInternalUrl()" class="button scheme-yellow">
                                    <i class="fa fa-angle-right" aria-hidden="true"></i> Lees meer
                                </a>
                            </div>
                        </div>
                    </div>
                }
            </div>
        }
        else
        {
            <div class="project-slider grid shrink flex">
                @foreach (var item in Model.Projects)
                {
                    <div class="project-item col-x-25 col-l--50 col-flex">
                        <div class="bumper-box block scheme-white">
                            @if (!string.IsNullOrEmpty(item.Image))
                            {
                                <a href="@item.GetInternalUrl()">
                                    <img src="@MediaExtensions.GetMediaUrl(item.Image)?mw=733" alt="@item.Title" class="radius" />
                                </a>
                            }
                            <div class="col-a-100">
                                <div class="bumper-content">
                                    <div class="rich-text">
                                        <h4>@item.Title</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="bumper-button">
                                <a href="@item.GetInternalUrl()" class="button scheme-yellow">
                                    <i class="fa fa-angle-right" aria-hidden="true"></i> Lees meer
                                </a>
                            </div>
                        </div>
                    </div>
                }
            </div>
        }
    </div>
</body>
</html>