{{resetCounter()}}


<div class="bb-loader" *ngIf="filtering">
    <div data-title="dot-pulse">
        <div class="stage">
            <div class="dot-pulse"></div>
        </div>
    </div>
</div>

<section class="horizontal-filter-tags">
    <div class="horizontal-filter-tag" *ngFor="let tag of tags" (click)="handleRemoveOption(tag)">
        <b>{{tag.typeName}}:</b>
        <span>{{tag.name}} {{tag.suffix}}</span>
        <svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M2.14062 0.546875L3.99219 3.625L5.86719 0.546875H7.5625L4.79688 4.71875L7.64844 9H5.97656L4.02344 5.82812L2.07031 9H0.390625L3.23438 4.71875L0.476562 0.546875H2.14062Z" fill="white" />
        </svg>
    </div>

    <div class="horizontal-filter-reset" *ngIf="tags.length > 0" (click)="resetOptions()">
        <span>Nulstil filter</span>
    </div>
</section>


<section class="bb-top" *ngIf="!hideTop && broadbands.length > 0">
    <div class="bb-top-count">
        <b style="font-size: 14px;"> <span *ngIf="totalBroadbands != filteredBroadbandsAmount && filteredBroadbandsAmount > 0">{{filteredBroadbandsAmount}} ud af </span>{{totalBroadbands}} pakker</b>
    </div>
</section>


<section class="bb-category" *ngFor="let category of list.categories">
    <div class="bb-category-banner" *ngIf="addressSearch">
        <img loading="lazy" src="/images/{{category.category}}.svg" alt="{{setType(category.category)}}" />
        <b>{{setType(category.category)}}</b>
    </div>
    <div *ngFor="let bb of category.broadbands | slice:0:category.show; let i=index" class="bb-card-con">
        <div id="{{bb.parentName}}-{{bb.downloadSpeed}}-{{bb.uploadSpeed}}" class="bb-card {{bb.parentName}}" [style.border]="(bb.extra.showCustomBackground && bb.extra.showBorderColor) ? '2px solid' + bb.extra.customBackgroundColor : counter == 0 && bb.extra.showCustomBackground && showRecommended ? '2px solid' + bb.extra.customBackgroundColor : '2px solid transparent'" [style.box-shadow]="counter == 0 ? '0px 6px 16px #0000006e' : '2px 2px 5px 0px #999'">
            <div class="bb-card-recommended" *ngIf="counter == 0 && showRecommended" [style.color]="(bb.extra.showCustomBackground) ? bb.extra.offerTextColor : 'white'" [style.background]="(bb.extra.showCustomBackground) ? bb.extra.customBackgroundColor : '#195580'">Anbefalet i {{month}}</div>
            <div *ngIf="bb.extra.showOfferBox" class="bb-card-offer" [style.background]="(bb.extra.showCustomBackground) ? bb.extra.customBackgroundColor : '#195580'" [style.color]="(bb.extra.showCustomBackground) ? bb.extra.offerTextColor : 'white'">
                <b>{{bb.extra.offerHeadline}}</b>
                <span>{{bb.extra.offerSubHeadline}}</span>
            </div>
            <div class="bb-card-left">
                <img (click)="redirect(bb)" width="170" height="58" src="{{bb.logo}}" loading="lazy" alt="{{bb.parentName}}" />
                <div class="bb-card-techtype">
                    <img loading="lazy" src="/images/{{bb.techType}}.svg" alt="{{bb.techTypeTranslated}}" />
                    <span>{{bb.techTypeTranslated}}</span>
                </div>
            </div>
            <div class="bb-card-mid">
                <div class="bb-card-info">
                    <div class="bb-card-info-text">
                        <b>{{bb.downloadSpeed}}/{{bb.uploadSpeed}} Mbit</b>
                        <span>{{bb.text.speed}}</span>
                    </div>
                    <div class="bb-card-info-text">
                        <b>{{(bb.totalPriceFor6Months).toLocaleString("da")}} kr.</b>
                        <span>{{bb.text.priceSixMonths}}</span>
                    </div>
                    <div class="bb-card-info-text discount grid " *ngIf="bb.showCampaignPrice; else normal">
                        <div class="discount-grid">
                            <div class="normal normal-grid">{{bb.normalPrice}} kr.</div>
                            <div class="price-text discount-grid">
                                {{bb.monthlyPrice}} kr.
                            </div>
                        </div>
                        <div class="month-grid">
                            <span class="month-grid">
                                {{bb.text.pricePerMonth}}
                            </span>
                            <div *ngIf="bb.extra.showInfo" class="bb-card-info-tt circle-grid">
                                <div class="bb-card-info-circle">i</div>
                                <span class="tt-text">
                                    <span class="tt-triangle"></span>
                                    <div [innerHTML]="bb.extra.infoText"></div>
                                </span>
                            </div>
                        </div>
                    </div>
                    <ng-template #normal>
                        <div class="bb-card-info-text grid">
                            <b class="price-text discount-grid">
                                {{bb.normalPrice}} kr.
                            </b>
                            <div class="month-grid">
                                <div class="month-grid monthly">{{bb.text.pricePerMonth}}</div>
                                <div *ngIf="bb.extra.showInfo" class="bb-card-info-tt circle-grid">
                                    <div class="bb-card-info-circle campaign">i</div>
                                    <span class="tt-text">
                                        <span class="tt-triangle"></span>
                                        <div [innerHTML]="bb.extra.infoText"></div>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </ng-template>
                </div>
                <div class="bb-card-punchlines" id="bb-{{bb.id}}">
                    <div class="bb-card-punchline">
                        <img loading="lazy" src="../images/creation.svg" alt="{{bb.text.creation}}" />
                        <span>{{bb.creationPrice}} kr. {{bb.text.creation}}</span>
                    </div>
                    <div class="bb-card-punchline">
                        <img loading="lazy" src="../images/binding.svg" alt="{{bb.text.binding}}" />
                        <span>{{bb.bindingPeriod}} mdr. {{bb.text.binding}}</span>
                    </div>
                    <div class="bb-card-punchline">
                        <img loading="lazy" src="../images/router.svg" alt="router" />
                        <span *ngIf="bb.router; else noRouter">{{bb.text.includedRouter}}</span>
                        <ng-template #noRouter><span>{{bb.text.noRouter}}</span></ng-template>

                    </div>
                </div>

            </div>
            <div class="bb-card-right">
                <div class="bb-card-stars">
                    <div class="stars">
                        <div class="rating-upper" [style.width]="bb.rating * 20 + '%'">
                            <div class="inner-rating"></div>
                        </div>
                        <div class="rating-lower">
                            <div class="inner-rating"></div>
                        </div>
                    </div>
                    <span class="star-text">{{bb.rating}}/5,0 {{bb.text.stars}}</span>
                </div>
                <div class="bb-card-btn-con">
                    <div class="bb-card-seemore-mb" id="bb-more-{{bb.id}}" (click)="showBroadbandInfo(bb.id)">


                        <span>Se mere</span>

                        <div class="bb-card-seemore-mb-svg">
                            <svg xmlns="http://www.w3.org/2000/svg" width="8.296" height="4.743" viewBox="0 0 8.296 4.743">
                                <path id="Icon_ionic-ios-arrow-down" data-name="Icon ionic-ios-arrow-down" d="M10.337,14.56l3.137-3.139a.59.59,0,0,1,.837,0,.6.6,0,0,1,0,.84l-3.554,3.557a.592.592,0,0,1-.818.017L6.36,12.263a.593.593,0,0,1,.837-.84Z" transform="translate(-6.188 -11.246)" fill="#001E70"></path>
                            </svg>
                        </div>

                    </div>
                    <button *ngIf="bb.addressId.length > 0" rel="nofollow" target="_blank" (click)="redirect(bb)" class="bb-card-btn btn-after" [attr.data-provider]="bb.parentName">{{bb.order ? "Bestil her" : bb.lead ? "Tilmeld her" : bb.text.providerBtn}}</button>
                </div>
            </div>
        </div>
        {{increment()}}

        <div *ngIf="(counter == 2 && showBanner(counter)) || (filteredBroadbands.length == 2 && counter == 1 && isMobile) ">
            <div class="mobile-banner" id='div-gpt-ad-1646291048932-0' style='min-width: 320px; max-height: 320px;'></div>
        </div>
        <div *ngIf="(counter == 4 && showBanner(counter)) || (filteredBroadbands.length < 4 && counter == filteredBroadbands.length && isMobile)">
            <div class="mobile-banner" style='min-width: 320px; max-height: 320px;'>
                <div class="an-display-2461-320x320-mobil-in-article-2 an-unit"></div>
            </div>
        </div>
    </div>
    <button class="bb-category-seemore" *ngIf="category.show < category.broadbands.length" (click)="showMore(category.category)">Vis flere</button>
</section>


<!-- ================================================================== LEAD POPUP ================================================================ -->

<div class="bb-popup-container" *ngIf="showPopup">
    <div class="bb-popup-filter" (click)="showPopup = false"></div>
    <div class="bb-popup" [class.finished]="finishedForm">
        <div class="bb-popup-exit" (click)="showPopup = false">
            <span></span>
            <span></span>
        </div>
        <div *ngIf="!finishedForm" class="bb-popup-content" style="width: 100%;" [class.hide]="submitting">
            <img class="bb-popup-logo" [src]="chosenBB.logo" [alt]="chosenBB.parentName" />
            <h2>Bliv kontaktet af {{chosenBB.parentName}}</h2>
            <div class="bb-popup-address">
                <svg xmlns="http://www.w3.org/2000/svg" width="22.5" height="31.499" viewBox="0 0 22.5 31.499">
                    <path id="Path_91608" data-name="Path 91608" d="M18,2.25A11.026,11.026,0,0,0,6.75,13.008c0,2.824,1.287,6.581,3.826,11.164A82.511,82.511,0,0,0,16.2,32.836a2.232,2.232,0,0,0,3.6,0,82.838,82.838,0,0,0,5.625-8.664c2.536-4.582,3.823-8.338,3.823-11.164A11.026,11.026,0,0,0,18,2.25ZM18,18a4.5,4.5,0,1,1,4.5-4.5A4.5,4.5,0,0,1,18,18Z" transform="translate(-6.75 -2.25)" fill="#00a8e0" />
                </svg>
                <b>{{dawa.addressString}}</b>
            </div>

            <form class="bb-popup-form" [formGroup]="profileForm" (ngSubmit)="onSubmit()">

                <div class="bb-popup-form-body-item">
                    <label for="name">Fulde navn <span>*</span> </label>
                    <input id="name" type="text" formControlName="name" [class.validated]="!name.invalid && name.touched" [class.invalid]="name.invalid && name.touched">
                    <img src="/images/form-check.svg" alt="validated" *ngIf="!name.invalid && name.touched" />
                    <img src="/images/form-error.svg" alt="invalid" *ngIf="name.invalid && name.touched" />
                    <div *ngIf="name.invalid && name.touched"
                         class="alert alert-danger">
                        <div *ngIf="name.errors?.['required']">
                            Skriv fulde navn
                        </div>
                    </div>
                </div>

                <div class="bb-popup-form-body-item">
                    <label for="email">E-mail <span>*</span> </label>
                    <input id="email" type="text" formControlName="email" [class.validated]="!email.invalid && email.touched" [class.invalid]="email.invalid && email.touched">
                    <img src="/images/form-check.svg" alt="validated" *ngIf="!email.invalid && email.touched" />
                    <img src="/images/form-error.svg" alt="invalid" *ngIf="email.invalid && email.touched" />
                    <div *ngIf="email.invalid && email.touched" class="alert alert-danger">
                        <div *ngIf="email.errors?.['required']">
                            Skriv e-mail
                        </div>
                        <div *ngIf="email.errors?.['pattern']">
                            Skriv korrekt email
                        </div>
                    </div>
                </div>
                <div class="bb-popup-form-body-item">
                    <label for="phone">Mobilnummer <span>*</span> </label>
                    <input id="phone" type="text" formControlName="phone" [class.validated]="!phone.invalid && phone.touched" [class.invalid]="phone.invalid && phone.touched">
                    <img src="/images/form-check.svg" alt="validated" *ngIf="!phone.invalid && phone.touched" />
                    <img src="/images/form-error.svg" alt="invalid" *ngIf="phone.invalid && phone.touched" />
                    <div *ngIf="phone.invalid && phone.touched" class="alert alert-danger">
                        <div *ngIf="phone.errors?.['required']">
                            Skriv telefonnummer
                        </div>
                        <div *ngIf="phone.errors?.['pattern']">
                            Skriv korrekt telefonnummer
                        </div>
                    </div>
                </div>

                <div class="bb-popup-form-body-item">
                    <label for="provider">Nuværende udbyder <span>*</span> </label>
                    <select id="provider" formControlName="provider" [class.validated]="!provider.invalid && provider.touched" [class.invalid]="provider.invalid && provider.touched">
                        <option value="" disabled selected>Vælg mulighed</option>
                        <option value="Altibox">Altibox</option>
                        <option value="Fastspeed">Fastspeed</option>
                        <option value="Fibia">Fibia</option>
                        <option value="Hiper">Hiper</option>
                        <option value="Kviknet">Kviknet</option>
                        <option value="Norlys">Norlys</option>
                        <option value="Oister">Oister</option>
                        <option value="Telenor">Telenor</option>
                        <option value="Telia">Telia</option>
                        <option value="Vios">Vios</option>
                        <option value="Waoo">Waoo</option>
                        <option value="Yousee">Yousee</option>
                        <option value="Anden / Ingen">Anden / Ingen</option>
                    </select>
                    <img src="/images/form-check.svg" alt="validated" *ngIf="!provider.invalid && provider.touched" />
                    <img src="/images/form-error.svg" alt="invalid" *ngIf="provider.invalid && provider.touched" />
                    <div *ngIf="provider.invalid && provider.touched" class="alert alert-danger">
                        <div *ngIf="provider.errors?.['required']">
                            Vælg nuværende udbyder
                        </div>
                    </div>
                </div>
                <div class="bb-popup-form-body-consentbox" [class.invalid]="privacyConsent.invalid && privacyConsent.touched">
                    <label class="check">
                        <input name="consent" id="consent" type="checkbox" formControlName="privacyConsent" />
                        <span [class.invalid]="privacyConsent.invalid && privacyConsent.touched" class="checkmark" id="privacy-check"></span>
                    </label>
                    <label class="bb-popup-form-body-consentbox-label">
                        Jeg godkender de generelle vilkår for <a target="_blank" href="/vilkaar-og-betingelser/">Find-internet.dk</a> og <a target="_blank" href="https://www.waoo.dk/privat/kundeservice/velkommen-til-kundeservice/betingelser-vilkaar/">{{chosenBB.parentName}}</a>
                    </label>
                </div>
                <div *ngIf="alreadyRegistered" class="bb-popup-duplicate">
                    <img src="/images/form-error.svg" alt="invalid" />
                    <span>Det ser ud som om du allerede er kunde hos {{chosenBB.parentName}} <br /> Kontakt {{chosenBB.parentName}} på 70 29 24 44 for mere info</span>
                </div>
                <button class="bb-popup-form-body-submit" type="submit">Tilmeld</button>

            </form>
        </div>
        <img class="bb-popup-loading" src="../images/spinner2.gif" alt="loading" *ngIf="submitting" />
        <div *ngIf="finishedForm" class="bb-popup-receipt" [class.hide]="submitting">
            <img src="/images/big-fi-icon.svg" alt="Tjekbredbaand" />
            <h2>Tak for din tilmelding!</h2>
            <div class="bb-popup-receipt-text">
                <p><b>{{chosenBB.parentName}}</b> kontakter dig telefonisk eller pr. mail indenfor 8 arbejdstimer, men det kan forventes indenfor en time. Du modtager en bekræftigelse på bestillingen på din indtastede mail.</p>
                <br />
                <p>WAOO ringer fra <b>70 29 24 44</b></p>
            </div>
            <img class="bb-popup-receipt-watermark" src="/images/fi-logo-dark.svg" alt="find-internet" />
        </div>

    </div>
</div>

<!-- ================================================================== ADDRESS CHECK POPUP ======================================================== -->


<section class="address-popup-container" *ngIf="showAddressPopup">
    <div class="address-popup-overlay" (click)="togglePopup()"></div>
    <div class="address-popup">
        <svg class="address-popup-exit" (click)="togglePopup()" width="27" height="29" viewBox="0 0 27 29" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M25.0468 2.72307L2.00024 26.0652" stroke="black" stroke-width="3" stroke-linecap="round" />
            <path d="M25.0468 25.8023L2.00024 2.46018" stroke="black" stroke-width="3" stroke-linecap="round" />
        </svg>

        <h3>Dette tilbud er muligvis ikke tilgængeligt på din adresse</h3>
        <p>Indtast din adresse, så tjekker vi om den valgte udbyder leverer til dig</p>
        <div class="address-popup-input-container">
            <p *ngIf="showAddressError" class="address-popup-input-error-text">Indtast venligst din adresse</p>
            <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M28.3332 14.1668C28.3332 20.4261 16.9998 31.1668 16.9998 31.1668C16.9998 31.1668 5.6665 20.4261 5.6665 14.1668C5.6665 7.9076 10.7406 2.8335 16.9998 2.8335C23.2591 2.8335 28.3332 7.9076 28.3332 14.1668Z" [attr.stroke]="showAddressError ? 'red' : '#009ED8'" stroke-width="1.5" />
                <path d="M17.0002 15.5833C17.7826 15.5833 18.4168 14.9491 18.4168 14.1667C18.4168 13.3843 17.7826 12.75 17.0002 12.75C16.2178 12.75 15.5835 13.3843 15.5835 14.1667C15.5835 14.9491 16.2178 15.5833 17.0002 15.5833Z" [attr.fill]="showAddressError ? 'white' : '#white'" [attr.stroke]="showAddressError ? 'red' : '#009ED8'" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            <input [style.border-color]="showAddressError ? 'red': ''" type="text" placeholder="Indtast din adresse" class="address-popup-input" id="pop-address" name="address" />
        </div>
        <div class="address-popup-searchbtn" (click)="showAddressError = true">
            <span>Tjek tilgængelighed</span>
            <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.50016 17H26.2085M26.2085 17L17.7085 8.5M26.2085 17L17.7085 25.5" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </div>
        <div class="address-popup-reason" (click)="showAddressTT = !showAddressTT">
            <span>Hvorfor har vi brug for din adresse?</span>
            <div class="address-popup-reason-tt">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_21_1234)">
                        <path d="M8 7.66669V11" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M8 5.00667L8.00667 4.99926" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M7.99998 14.6666C11.6819 14.6666 14.6666 11.6819 14.6666 7.99998C14.6666 4.31808 11.6819 1.33331 7.99998 1.33331C4.31808 1.33331 1.33331 4.31808 1.33331 7.99998C1.33331 11.6819 4.31808 14.6666 7.99998 14.6666Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
                    </g>
                    <defs>
                        <clipPath id="clip0_21_1234">
                            <rect width="16" height="16" fill="white" />
                        </clipPath>
                    </defs>
                </svg>

            </div>
        </div>
        <div class="address-popup-reason-tt-content" [style.opacity]="showAddressTT ? '1' : '0'" (click)="showAddressTT = !showAddressTT">
            <b>Hvorfor skal vi bruge din adresse?</b>
            <p>
                Din adresse sikrer, at du får præcise tilbud i dit område. Indtast den og få vist relevante tilbud fra udbydere.
            </p>
        </div>
        <hr />
        <div class="address-popup-redirectbtn" (click)="goThrough(chosenBB)">
            <span>
                Det er okay, send mig til tilbuddet alligevel
            </span>
            <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.24984 9H13.104M13.104 9L8.854 4.75M13.104 9L8.854 13.25" stroke="#565656" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </div>
    </div>
</section>