import {Component, Input} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
    selector: 'showTitle',
    template: `
        <h1 [ngClass]="classNames">
          <div *ngIf="title != undefined" class="landingTitle">
              <span *ngIf="title['url'] != undefined && title['url'] != null && title['url'] != ''"
                      class="custom-external">
                  <a *ngIf="title['name'] != undefined && title['name'] != ''"
                      href="{{title['url']}}" target="_blank"
                      [innerHTML]="title['name']">
                  </a>
                  <a *ngIf="title['name'] == undefined || title['name'] == ''"
                      href="{{title['url']}}" target="_blank">
                      [no title available]
                  </a>
              </span>
              <span *ngIf="(title['name'] != undefined && title['name'] != '') &&
                      (title['url'] == undefined || title['url'] == null || title['url'] == '')"
                      [innerHTML]="title['name']">
              </span>
              <span *ngIf="(title['name'] == undefined || title['name'] == '') &&
                      (title['url'] == undefined || title['url'] == null || title['url'] == '')"
                       >
                  [no title available]
              </span>
          </div>
          <div *ngIf="titleName">
            <span [innerHTML]="titleName"></span>
          </div>
          <div *ngIf="!titleName && !title">
            <span>No title available</span>
          </div>
        </h1>
    `

    })

export class ShowTitleComponent {
  @Input() titleName: string;
  @Input() title: { [key: string]: string };
  @Input() iconClass:string;
  @Input() classNames: string = "";

  constructor () {}

}