@using DR.Web.UI.Helpers
@using DR.Web.UI.ViewConfig
@model DR.AcCommonUI.Models.LivePage.LivePageViewModel
@{
    
    int socialMediaNum = Model.LivePageConfiguration.SocialMediaSources.Count();
    // WE ALWAYS NEED TO CLOUMNS EVEN IF WE ONLY SHOW ONE FEED  - WEE NEED SPAN-6
    if(socialMediaNum == 1) {
        socialMediaNum = 2;
    }
    
    var serverTime = DateTime.Now.ToString("HH:mm");
    //int count = 12 / socialMediaNum;
    int count = 12 / 3;
    <div class="section boxed dr-page-social-media backstage-container-extended appendable-items">
        <h2 id="social">Sociale medier</h2>
        <div class="dr-social-media-count" data-baseurl="@Model.SocialApiUrl" data-socialsynsrc="">
            Senest opdateret kl: <span class="number">@serverTime</span>
            <a href="javascript:void(0);" class="dr-ui-button" title="Auto opdatering til/fra"><input type="checkbox" class="autoUpdate" value="" name="socialMediaAutoUpdate">Auto opdater</a>
        </div>
        <div class="combine-layout">
            @foreach (var socialMedia in Model.LivePageConfiguration.SocialMediaSources)
            {
                
                    int counter = 0;
                    int totalItems = socialMedia.SocialMediaItems.Count();
                    string span12 = "";
                    if (totalItems > 0) {
                        if(socialMedia.SocialMediaItems.First().SourceType == "instagram") {
                            span12 = "span-12";
                        }
                    
                        <div class="span-@count">
                            <div class="section social-band">
                                <h2>@socialMedia.Headline</h2>
                         
                                <ul class="@socialMedia.SocialMediaItems.First().SourceType @span12">

                            @foreach (var item in socialMedia.SocialMediaItems)
                            {
                            
                                
                                var classItem = "item";
                                if (counter == 0) { classItem = ""; }
                                if (item.SourceType != "instagram")
                                {
                                    //string trimmedString = item.Content.Replace("/<[^>]*>?/gi", "").Substring(0, 140);
                                    int index = -1;
                                    //string trimmedString = System.Text.RegularExpressions.Regex.Replace(item.Content, "/<[^>]*>?/gi", string.Empty);
                                    string trimmedString = item.Content;
                                    int trimmedStringLength = trimmedString.Length;
                                    if(trimmedStringLength > 140) {
                                        trimmedString = trimmedString.Substring(0, 140);
                                        index = trimmedString.LastIndexOf(" ");
                                        if(index > 0) {
                                            trimmedString = trimmedString.Substring(0, Math.Min(trimmedStringLength, index));
                                        }
                                        else {
                                            // if no spaces are found in the text
                                            trimmedString = trimmedString.Substring(0, 140);
                                        }

                                        trimmedString = trimmedString + "...";
                                    }
                        
                                    <li>
                                        <div class="@classItem image-1 social-image">
                                            <span class="image-wrap " aria-hidden="true" role="presentation">
                                                <img src="@item.AuthorImageUrl" alt="" role="presentation" aria-hidden="true">
                                                <noscript data-height="0" data-width="0" data-alt="" data-src="">
                                                    &lt;img src="@item.AuthorImageUrl" alt="" width="0" height="0" role="presentation" aria-hidden="true"&gt;
                                                </noscript>
                                            </span>
                                            <a href="@item.UserUrl" target="_blank" class="heading-xsmall">@item.Author.ToString()</a>
                                            <span class="metainfo">
                                                <time class="dr-icon-@item.SourceType-boxed">@item.Posted.ToString("dd. MMM yyyy kl: HH:mm")</time>
                                            </span>
                                            <p>
                                                <a href="@item.Url" target="_blank">@trimmedString</a>
                                            </p>
                                        </div>
                                    </li>
                                    }

                                    if (item.SourceType == "instagram")
                                    {
                                        if(counter == 0) {
                                            @:<li class="combine-layout">
                                        }
                                        <!--    
                                                <div class="instagram-item span-1">
                                                    <a title="@item.Posted" href="@item.Url" class="instagram-image">
                                                        <img alt="Instagram billede fra bruger @item.Author" src="@item.ImageUrl" />
                                                    </a>
                                                </div>
                                            -->
                                            <div class="span-4">
                                            <a class="instagram-image" href="@item.Url" title="Link til instagram billede.">
                                                <img src="@item.ImageUrl" alt="Instagram billede." />
                                            </a>
                                                </div>
                                        if (counter == totalItems)
                                        {
                                          @:</li>
                                        }
                                    }
                            
                            
                                    counter++;
                                } @*foreach*@
                            </ul>
                               
                            </div>
                        </div>                
                    }
            }
            
            <span class="serverTime" dr-data="@serverTime"></span>
        </div>
        <p class="hidden message" id="message">Indlæser...</p><a href="#" class="dr-ui-button load-more multiple dr-icon-arrow-down" id="load-more">Vis flere</a>
    </div>
}