<div class="social-icons-container-inner">

    <a *ngIf="homepage" class="media-icons" href="{{homepage}}" target="_blank">
        <i matTooltip="Homepage" class="sfa-home fa-2x grow-social"></i>
    </a>
    <a *ngIf="theMoviedbId" href="https://www.themoviedb.org/{{type === RequestType.movie ? 'movie' : 'tv'}}/{{theMoviedbId}}" class="media-icons"
        target="_blank">
        <i matTooltip="The Movie DB" class="fas fa-film fa-2x grow-social"></i>
    </a>
    <a *ngIf="tvdbId" href="https://www.thetvdb.com/?id={{tvdbId}}&tab=series" class="media-icons" target="_blank">
        <i matTooltip="The TV DB" class="fas fa-tv fa-2x grow-social"></i>
    </a>

    <a *ngIf="hasTrailer" data-testid="social-trailer" class="media-icons youtube" (click)="openDialog()">
        <i matTooltip="Trailer" class="fab fa-youtube fa-2x grow-social"></i>
    </a>
    <a *ngIf="imdbId" class="media-icons imdb" [href]="doNotAppend ? imdbid : 'https://imdb.com/title/' + imdbId" target="_blank">
        <i matTooltip="Imdb" class="fab fa-imdb fa-2x grow-social"></i>
    </a>
    <a *ngIf="theMoviedbId" class="media-icons trakt" href="https://trakt.tv/search/tmdb/{{theMoviedbId}}?id_type={{type === RequestType.movie ? 'movie' : 'show'}}" target="_blank">
        <img matTooltip="Trakt" src="{{baseUrl}}/images/trakt.svg" />
    </a>
    <a *ngIf="twitter" class="media-icons" [href]="doNotAppend ? twitter : 'https://twitter.com/' + twitter" target="_blank">
        <i matTooltip="Twitter" class="fab fa-twitter fa-2x grow-social"></i>
    </a>
    <a *ngIf="facebook" class="media-icons" [href]="doNotAppend ? facebook : 'https://facebook.com/' + facebook" target="_blank">
        <i matTooltip="Facebook" class="fab fa-facebook fa-2x grow-social"></i>
    </a> <a *ngIf="instagram" class="media-icons" [href]="doNotAppend ? instagram : 'https://instagram.com/' + instagram" target="_blank">
        <i matTooltip="Instagram" class="fab fa-instagram fa-2x grow-social"></i>
    </a>
    <!-- Setting/Configuration admin area -->
    <button *ngIf="isAdmin" mat-icon-button [matMenuTriggerFor]="menu" class="admin-cog">
        <i class="fas fa-cog fa-2x "></i>
    </button>
    <mat-menu #menu="matMenu">
        <button mat-menu-item [disabled]="!canShowAdvanced" (click)="openAdvancedOptions()">
            <i class="fas fa-ticket-alt icon-spacing"></i>
            <span *ngIf="type === RequestType.movie"> {{ 'MediaDetails.RadarrConfiguration' | translate}}</span>
            <span *ngIf="type === RequestType.tvShow"> {{ 'MediaDetails.SonarrConfiguration' | translate}}</span>
        </button>
        <button *ngIf="type === RequestType.movie" mat-menu-item (click)="reProcessRequest(false)">
            <i class="fas fa-sync icon-spacing"></i>
            <span> {{ 'MediaDetails.ReProcessRequest' | translate}}</span>
        </button>
        <button *ngIf="type === RequestType.movie && has4KRequest" mat-menu-item (click)="reProcessRequest(true)">
            <i class="fas fa-sync icon-spacing"></i>
            <span> {{ 'MediaDetails.ReProcessRequest4K' | translate}}</span>
        </button>
    </mat-menu>
</div>
