<div class="row no-gutters mt-2 mb-2">
    <app-read-more [text]="seriesSummary" [maxLength]="250"></app-read-more>
</div>

<!-- This first row will have random information about the series-->
<div class="row no-gutters mb-2">
    <app-tag-badge title="Age Rating" *ngIf="seriesMetadata.ageRating" a11y-click="13,32" class="clickable" (click)="goTo('ageRating', seriesMetadata.ageRating)" [selectionMode]="TagBadgeCursor.Clickable">{{metadataService.getAgeRating(this.seriesMetadata.ageRating) | async}}</app-tag-badge>
    <ng-container *ngIf="series">
        <!-- Maybe we can put the library this resides in to make it easier to get back -->
        <!-- tooltip here explaining how this is year of first issue -->
        <app-tag-badge *ngIf="seriesMetadata.releaseYear > 0" title="Release date">{{seriesMetadata.releaseYear}}</app-tag-badge>
        <app-tag-badge *ngIf="seriesMetadata.language !== null && seriesMetadata.language !== ''" title="Language" a11y-click="13,32" class="clickable" (click)="goTo('languages', seriesMetadata.language)" [selectionMode]="TagBadgeCursor.Clickable">{{seriesMetadata.language}}</app-tag-badge>
        <app-tag-badge title="Publication Status" a11y-click="13,32" class="clickable" (click)="goTo('publicationStatus', seriesMetadata.publicationStatus)" [selectionMode]="TagBadgeCursor.Clickable">{{seriesMetadata.publicationStatus | publicationStatus}}</app-tag-badge>
        <app-tag-badge a11y-click="13,32" class="clickable" (click)="goTo('format', series.format)" [selectionMode]="TagBadgeCursor.Clickable">
            <app-series-format [format]="series.format">{{utilityService.mangaFormat(series.format)}}</app-series-format>
        </app-tag-badge>
    </ng-container>
</div>

<div class="row no-gutters" *ngIf="seriesMetadata.genres && seriesMetadata.genres.length > 0">
    <div class="col-md-4">
        <h5>Genres</h5>
    </div>
    <div class="col-md-8">
        <app-badge-expander [items]="seriesMetadata.genres">
            <ng-template #badgeExpanderItem let-item let-position="idx">
                <app-tag-badge a11y-click="13,32" class="clickable" (click)="goTo('genres', item.id)" [selectionMode]="TagBadgeCursor.Clickable">{{item.title}}</app-tag-badge>
            </ng-template>  
        </app-badge-expander>
    </div>
</div>
<div class="row no-gutters mt-1" *ngIf="seriesMetadata.collectionTags && seriesMetadata.collectionTags.length > 0">
    <div class="col-md-4">
        <h5>Collections</h5>
    </div>
    <div class="col-md-8">
        <app-badge-expander [items]="seriesMetadata.collectionTags">
            <ng-template #badgeExpanderItem let-item let-position="idx">
                <app-tag-badge a11y-click="13,32" class="clickable" routerLink="/collections/{{item.id}}" [selectionMode]="TagBadgeCursor.Clickable">
                    {{item.title}}
                </app-tag-badge>
            </ng-template>  
        </app-badge-expander>
    </div>
</div>
<div class="row no-gutters mt-1" *ngIf="seriesMetadata.writers && seriesMetadata.writers.length > 0">
    <div class="col-md-4">
        <h5>Writers/Authors</h5>
    </div>
    <div class="col-md-8">
        <app-badge-expander [items]="seriesMetadata.writers">
            <ng-template #badgeExpanderItem let-item let-position="idx">
                <app-person-badge a11y-click="13,32" class="clickable" (click)="goTo('writers', item.id)" [person]="item"></app-person-badge>
            </ng-template>  
        </app-badge-expander>
    </div>
</div>

<div class="row no-gutters">
    <hr class="col-md-11" *ngIf="hasExtendedProperites" >
    <a [class.hidden]="hasExtendedProperites" *ngIf="hasExtendedProperites" class="col-md-1 read-more-link" (click)="toggleView()">&nbsp;<i aria-hidden="true" class="fa fa-caret-{{isCollapsed ? 'down' : 'up'}}" aria-controls="extended-series-metadata"></i>&nbsp;See {{isCollapsed ? 'More' : 'Less'}}</a>
</div>

<div #collapse="ngbCollapse" [(ngbCollapse)]="isCollapsed" id="extended-series-metadata">
    <div class="row no-gutters mt-1"  *ngIf="seriesMetadata.coverArtists && seriesMetadata.coverArtists.length > 0">
        <div class="col-md-4">
            <h5>Cover Artists</h5>
        </div>
        <div class="col-md-8">
            <app-badge-expander [items]="seriesMetadata.coverArtists">
                <ng-template #badgeExpanderItem let-item let-position="idx">
                    <app-person-badge a11y-click="13,32" class="clickable" (click)="goTo('coverArtists', item.id)" [person]="item"></app-person-badge>
                </ng-template>  
            </app-badge-expander>
        </div>
    </div>
    
    <div class="row no-gutters mt-1"  *ngIf="seriesMetadata.characters && seriesMetadata.characters.length > 0">
        <div class="col-md-4">
            <h5>Characters</h5>
        </div>
        <div class="col-md-8">
            <app-badge-expander [items]="seriesMetadata.characters">
                <ng-template #badgeExpanderItem let-item let-position="idx">
                    <app-person-badge a11y-click="13,32" class="clickable" (click)="goTo('character', item.id)" [person]="item"></app-person-badge>
                </ng-template>  
            </app-badge-expander>
        </div>
    </div>

    <div class="row no-gutters mt-1"  *ngIf="seriesMetadata.colorists && seriesMetadata.colorists.length > 0">
        <div class="col-md-4">
            <h5>Colorists</h5>
        </div>
        <div class="col-md-8">
            <app-badge-expander [items]="seriesMetadata.colorists">
                <ng-template #badgeExpanderItem let-item let-position="idx">
                    <app-person-badge a11y-click="13,32" class="clickable" (click)="goTo('colorist', item.id)" [person]="item"></app-person-badge>
                </ng-template>  
            </app-badge-expander>
        </div>
    </div>

    <div class="row no-gutters mt-1"  *ngIf="seriesMetadata.editors && seriesMetadata.editors.length > 0">
        <div class="col-md-4">
            <h5>Editors</h5>
        </div>
        <div class="col-md-8">
            <app-badge-expander [items]="seriesMetadata.editors">
                <ng-template #badgeExpanderItem let-item let-position="idx">
                    <app-person-badge a11y-click="13,32" class="clickable" (click)="goTo('editor', item.id)" [person]="item"></app-person-badge>
                </ng-template>  
            </app-badge-expander>
        </div>
    </div>

    <div class="row no-gutters mt-1"  *ngIf="seriesMetadata.inkers && seriesMetadata.inkers.length > 0">
        <div class="col-md-4">
            <h5>Inkers</h5>
        </div>
        <div class="col-md-8">
            <app-badge-expander [items]="seriesMetadata.inkers">
                <ng-template #badgeExpanderItem let-item let-position="idx">
                    <app-person-badge a11y-click="13,32" class="clickable" (click)="goTo('inker', item.id)" [person]="item"></app-person-badge>
                </ng-template>  
            </app-badge-expander>
        </div>
    </div>

    <div class="row no-gutters mt-1"  *ngIf="seriesMetadata.letterers && seriesMetadata.letterers.length > 0">
        <div class="col-md-4">
            <h5>Letterers</h5>
        </div>
        <div class="col-md-8">
            <app-badge-expander [items]="seriesMetadata.letterers">
                <ng-template #badgeExpanderItem let-item let-position="idx">
                    <app-person-badge a11y-click="13,32" class="clickable" (click)="goTo('letterer', item.id)" [person]="item"></app-person-badge>
                </ng-template>  
            </app-badge-expander>
        </div>
    </div>
    <div class="row no-gutters" *ngIf="seriesMetadata.tags && seriesMetadata.tags.length > 0">
        <div class="col-md-4">
            <h5>Tags</h5>
        </div>
        <div class="col-md-8">
            <app-badge-expander [items]="seriesMetadata.tags">
                <ng-template #badgeExpanderItem let-item let-position="idx">
                    <app-tag-badge a11y-click="13,32" class="clickable" (click)="goTo('tags', item.id)" [selectionMode]="TagBadgeCursor.Clickable">{{item.title}}</app-tag-badge>
                </ng-template>  
            </app-badge-expander>
        </div>
    </div>
    <div class="row no-gutters mt-1"  *ngIf="seriesMetadata.translators && seriesMetadata.translators.length > 0">
        <div class="col-md-4">
            <h5>Translators</h5>
        </div>
        <div class="col-md-8">
            <app-badge-expander [items]="seriesMetadata.translators">
                <ng-template #badgeExpanderItem let-item let-position="idx">
                    <app-person-badge a11y-click="13,32" class="clickable" (click)="goTo('translators', item.id)" [person]="item"></app-person-badge>
                </ng-template>  
            </app-badge-expander>
        </div>
    </div>
    
    <div class="row no-gutters mt-1"  *ngIf="seriesMetadata.pencillers && seriesMetadata.pencillers.length > 0">
        <div class="col-md-4">
            <h5>Pencillers</h5>
        </div>
        <div class="col-md-8">
            <app-badge-expander [items]="seriesMetadata.pencillers">
                <ng-template #badgeExpanderItem let-item let-position="idx">
                    <app-person-badge a11y-click="13,32" class="clickable" (click)="goTo('penciller', item.id)" [person]="item"></app-person-badge>
                </ng-template>  
            </app-badge-expander>
        </div>
    </div>

    <div class="row no-gutters mt-1"  *ngIf="seriesMetadata.publishers && seriesMetadata.publishers.length > 0">
        <div class="col-md-4">
            <h5>Publishers</h5>
        </div>
        <div class="col-md-8">
            <app-badge-expander [items]="seriesMetadata.publishers">
                <ng-template #badgeExpanderItem let-item let-position="idx">
                    <app-person-badge a11y-click="13,32" class="clickable" (click)="goTo('publisher', item.id)" [person]="item"></app-person-badge>
                </ng-template>  
            </app-badge-expander>
        </div>
    </div>
</div>