@(section: String)(implicit request: RequestHeader)

@import conf.switches.Switches
@import common.LinkTo
@import fragments.commercial.adSlot

@defining(Some(section).filter{ section => section.nonEmpty && !section.equals("global")}.map{ section => s"/most-read/$section" }.getOrElse("/most-read")){ url =>
    <section
    class="fc-container fc-container--has-toggle js-most-popular-footer"
    data-link-name="most-popular"
    data-component="most-popular">
        <div class="fc-container__inner">
            <div class="fc-container__header js-container__header">
                <h2 class="fc-container__header__title">
                    <a href="@LinkTo(url)" data-link-name="Most viewed @section">Most popular</a>
                </h2>
            </div>
            @defining(Switches.ExtendedMostPopular.isSwitchedOn){ isExtended =>
                <div class="fc-container--rolled-up-hide @if(isExtended) {most-popular__container} else {fc-container__body popular-trails}">
                <div class="@if(isExtended) {most-popular__content} else {popular-trails__content} js-popular-trails">
                </div>
                <div class="@if(isExtended) {most-popular__mpu} else {popular-trails__mpu}">
                    <div class="@if(!isExtended) {fc-slice__popular-mpu fc-slice__item--mpu-candidate}">
                        @adSlot(
                        "mostpop",
                        Seq("container-inline"),
                        Map(),
                        optId = None,
                        optClassNames = None
                        ){ }
                    </div>
                </div>
            }
            </div>

        </div>
    </section>
}