@*@model DR.FV2016.Web.Models.ArticleView*@
@model DR.FV2016.Web.Models.FvViewBase
@using DR.Web.UI.Model;
@{

	var topspotItems = (from a in Model.TopSpots.Items where (a.Priority == 90 || a.Priority == 91) select a).OrderBy(a=>a.Priority).ToArray();
    var name = string.Empty;
    if (topspotItems.Any())
    {
        // generer navn ud fra headline streng
        var headline = topspotItems[0].Headline;
        int nameCharPositionEnd = headline.IndexOf(":");
        int beginningOfHeadlineText = nameCharPositionEnd + 2; //+2 for at fjerne semikolon i tekst(Headline)
        int endOfHeadlineText = headline.Length - beginningOfHeadlineText;

        //hvis et navn "detekteres" defineres tekst og navn hver for sig.
        if (nameCharPositionEnd > 0)
        {
            name = headline.Substring(0, nameCharPositionEnd);
            topspotItems[0].Headline = headline.Substring(beginningOfHeadlineText, endOfHeadlineText);
        }
    }
}


@if (topspotItems.Any())
{
    <div class="section mute-heading top-band">
        <h2>@topspotItems[0].Section</h2>
        <ul class="combine-layout">
            <li class="span-7 quote">
                <div class="item image-1 ">
                    <a role="presentation" aria-hidden="true" href="@topspotItems[0].Url" class="image-wrap " type="noscript"><img aria-hidden="true" role="presentation" alt="" src="http://www.dr.dk/imagescaler/?file=@topspotItems[0].WideAspectImage.ImageUrl&amp;w=127&amp;h=110&amp;scaleAfter=crop&amp;server=www.dr.dk">
                                                                                                                              <noscript data-src="" data-alt="" data-width="@topspotItems[0].WideAspectImage.Width" data-height="@topspotItems[0].WideAspectImage.Height">
                                                                                                                                  <img src="@topspotItems[0].WideAspectImage.ImageUrl" alt="@topspotItems[0].WideAspectImage.AltText" width="@topspotItems[0].WideAspectImage.Width" height="@topspotItems[0].WideAspectImage.Height" role="presentation" aria-hidden="true" />
                                                                                                                              </noscript>
                    </a>
                    <a href="@topspotItems[0].Url" class="heading-xxsmall">
                        <q>@topspotItems[0].Headline</q>
                    </a>
                    <p class="name">@name</p>
                </div>
            </li>
            @if (topspotItems.Count() >= 2)
            {
                <li class="span-5 side-article">
                    <div class="item image-2 ">
                        <a role="presentation" aria-hidden="true" href="@topspotItems[1].Url" class="image-wrap " type="noscript"><img aria-hidden="true" role="presentation" alt="@topspotItems[1].WideAspectImage.AltText" src="http://www.dr.dk/imagescaler/?file=@topspotItems[1].WideAspectImage.ImageUrl&amp;w=155&amp;h=88&amp;scaleAfter=crop&amp;server=www.dr.dk">
                                                                                                                                  <noscript data-src="" data-alt="@topspotItems[1].WideAspectImage.AltText" data-width="@topspotItems[1].WideAspectImage.Width" data-height="@topspotItems[1].WideAspectImage.Height">
                                                                                                                                      &lt;img src="@topspotItems[1].WideAspectImage.ImageUrl" alt="@topspotItems[1].WideAspectImage.AltText" width="@topspotItems[1].WideAspectImage.Width" height="@topspotItems[1].WideAspectImage.Height" role="presentation" aria-hidden="true" /&gt;
                                                                                                                                  </noscript>
                        </a>

                        <a class="heading-small" href="@topspotItems[1].Url">@topspotItems[1].Headline</a>


                    </div>
                </li>
            }
        </ul>
    </div>
    
}