<h1 id="searchTitle"  [translate]="'Requests.Title'"></h1>
<h4  [translate]="'Requests.Paragraph'"></h4>

<ul id="nav-tabs" class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
        <a id="movieTabButton" aria-controls="home" role="tab" data-toggle="tab" (click)="selectMovieTab()" href="#movieTab"><i class="fas fa-film"></i> {{ 'Requests.MoviesTab' | translate }}</a>
    </li>
    <li role="presentation">
        <a id="tvTabButton" aria-controls="profile" role="tab" data-toggle="tab" (click)="selectTvTab()" href="#tvTab"><i class="fas fa-tv"></i> {{ 'Requests.TvTab' | translate }}</a>

    </li>
    <li role="presentation" *ngIf="musicEnabled">
        <a id="albumTabButton" aria-controls="profile" role="tab" data-toggle="tab" (click)="selectMusicTab()" href="#albumTab"><i class="fas fa-music"></i> {{ 'Requests.MusicTab' | translate }}</a>

    </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div [hidden]="!showMovie">
        <movie-requests [issueCategories]="issueCategories" [issuesEnabled]="issuesEnabled"></movie-requests>
    </div>
    <div [hidden]="!showTv">
        <tv-requests [issueCategories]="issueCategories" [issuesEnabled]="issuesEnabled"></tv-requests>
    </div>
    <div [hidden]="!showAlbums">
        <music-requests [issueCategories]="issueCategories" [issuesEnabled]="issuesEnabled"></music-requests>
    </div>
</div>

