@inherits GlassView<DescriptionModule>
@{
    var siteSettings = SiteSettings.GetSiteSettings();
}

@if (Model.IsValid() && Model.HasContent())
{
    <div class="description @(Model.HasMedia().IfFalse("description--noMedia")) @Model.CenterText.IfTrue("u-alignCenter") @Model.GetBackgroundClass("description") @Model.GetPaddingCss()" id="@Model.Id.ToString()">
        <div class="container">
            @if (Model.Title.HasValue())
            {
            @Editable(Model, x => string.Format("<h2 class='description-title u-alignCenter'>{0}</h2>", x.Title.ReplaceNewLines()))
            }
            <div class="row">
                @if (Model.HasMedia())
                {
                <div class="description-media-column col-md-6 @Model.LeftImage.IfFalse("col-md-push-6") col-md-offset-0 col-xs-8 col-xs-offset-2">
                    @if (Model.VideoId.HasValue())
                    {
                        <a href="#" class="video-placeholder">
                            @if (IsInEditingMode || (Model.VideoPlaceholderImage != null && Model.VideoPlaceholderImage.Src.HasValue()))
                            {
                            @(Editable<DescriptionModule>(Model, x => x.GetVideoPlaceHolder(), x => string.Format("<img src='{0}' class='video-placeholder-photo' alt='{1}'>", x.GetVideoPlaceHolder(), x.VideoPlaceholderImage.Alt)))
                            }
                            else
                            {
                            <img src="@Model.GetVideoPlaceHolder()" class="video-placeholder-photo" alt="@Model.Title.GetValue()">
                            }
                            <span class="video-placeholder-icon"><i class="material-icons">&#xE038;</i></span>
                        </a>

                        <div class="video-player" style="display: none; position: relative; max-width: 100%;">
                            <div style="padding-top: 56.25%;">
                                @if (Model.VideoType.ToLower().Trim() == "brightcove")
                                {
                                <video id="@("video" + Model.VideoId)" data-account="@siteSettings.BrightcoveAccount" data-player="@siteSettings.BrightcovePlayerID" data-embed="default" data-video-id="@Model.VideoId" data-video-service="@Model.VideoType.ToLower()" class="video-js" controls></video>
                                }
                                else
                                {
                                    <iframe id="@("video" + Model.VideoId)" src="@("https://www.youtube.com/embed/" + Model.VideoId + "?html5=true&showinfo=0&enablejsapi=1")" data-video-service="@Model.VideoType.ToLower()" class="video-youtube" frameborder="0" allowfullscreen></iframe>
                                }
                            </div>
                        </div>

                        if (Model.VideoDescription.HasValue())
                        {
                        @Editable(x => x.VideoDescription, x => string.Format("<span class='description-photo-caption'>{0}</span>", x.VideoDescription))
                        }
                    }
                    else if (Model.Image != null)
                    {
                    @(Editable<DescriptionModule>(Model, x => x.Image, x => string.Format("<img src='{0}' class='description-photo' alt='{1}'>", x.Image.Src, x.Image.Alt)))

                        if (Model.ImageDescription != null)
                        {
                        @Editable(x => x.ImageDescription, x => string.Format("<span class='description-photo-caption'>{0}</span>", x.ImageDescription))
                        }
                    }
                </div>
                }
                <div class="description-text-column @Model.HasMedia().IfTrue("col-md-6" + Model.LeftImage.IfFalse(" col-md-pull-6")) col-xs-12">
                    @if (Model.SubTitle.HasValue())
                    {
                    @Editable(Model, x => string.Format("<h4 class='description-subtitle'>{0}</h4>", x.SubTitle))
                    }
                    @if (Model.Description.HasValue())
                    {
                    <div class="description-content">
                        @Editable(Model, x => x.Description)
                    </div>
                    }

                    @if (Model.CtaTarget != null && Model.CtaTarget.Url.HasValue())
                    {
                    @RenderLink(x => x.CtaTarget, new NameValueCollection { { "class", "description-cta " + (Model.CtaPlainText ? "arrow-link" : "btn btn--primary") } }, isEditable: true, contents: Model.GetCTAContent())
                    }

                    @if (Model.SecondaryCtaTarget.HasUrl())
                    {
                        @RenderLink(x => x.SecondaryCtaTarget, new NameValueCollection { { "class", "description-cta " + (Model.CtaPlainText ? "arrow-link" : "btn btn--primary") } }, isEditable: true, contents: Model.SecondaryCtaText)
                    }
                </div>
            </div>
        </div>
    </div>
}