<section>
    <div class="bannerimg cover-image" style="background: url('./assets/images/photos/banner1.jpg') center center;">
        <div class="header-text mb-0">
            <div class="container ">
                <div class="row text-white">
                    <div class="col">
                        @if (!isEncryptedSegment(titles[titles.length - 1])) {
                        <h1 class="mb-0">{{titles[titles.length - 1] | translate | titlecase}}</h1>
                        }
                    </div>
                    <div class="col col-auto">
                        <ol class="breadcrumb text-center">
                            <li class="breadcrumb-item">
                                <a routerLink="/" class="text-white-50">{{'Home' | translate}}</a>
                            </li>
                            @for(title of titles; track title){
                                @if (!isEncryptedSegment(title)) {
                                    <li class="breadcrumb-item active">
                                        <a href="javascript:;" class="text-white">{{title | translate | titlecase}}</a>
                                    </li>
                                }
                            }
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>