ui enhancements and song state

src/app/modules/songs/song/song.component.html

@@ -1,17 +1,19 @@
 <div class="split">
-  <app-card *ngIf="song$ | async as song" [heading]="song.number + ' - ' + song.title">
+  <app-card *ngIf="song$ | async as song" [heading]="song.number + ' - ' + song.title" closeLink="../">
     <div class="song">
       <div>
-        <div class="detail">
+        <div *appRole="['leader', 'contributor']" class="detail">
           <div>Typ: {{song.type | songType}}</div>
           <div>Tonart: {{song.key}}</div>
           <div>Tempo: {{song.tempo}}</div>
+          <div>Status: {{(song.status|status) || 'entwurf'}}</div>
           <div *ngIf="song.legalOwner">Rechteinhaber: {{song.legalOwner|legalOwner}}</div>
           <div *ngIf="song.legalOwnerId">Rechteinhaber ID: {{song.legalOwnerId}}</div>
           <div *ngIf="song.legalLicenseId">Lizenznummer: {{song.legalLicenseId}}</div>
           <div *ngIf="song.artist">Künstler: {{song.artist}}</div>
           <div *ngIf="song.label">Verlag: {{song.label}}</div>
           <div *ngIf="song.origin">Quelle: {{song.origin}}</div>
+          <div *ngIf="song.origin">Quelle: {{song.origin}}</div>
         </div>
       </div>
 
@@ -19,24 +21,20 @@
       <app-song-text *ngIf="user$|async as user" [chordMode]="user.chordMode" [showSwitch]="true"
                      [text]="song.text"></app-song-text>
 
-      <mat-chip-list aria-label="Attribute">
+      <mat-chip-list *appRole="['leader', 'contributor']" aria-label="Attribute">
         <mat-chip *ngFor="let flag of getFlags(song.flags)">{{flag}}</mat-chip>
       </mat-chip-list>
 
-      <div class="text">{{song.comment}}</div>
-      <div>
-        <h3>Anhänge</h3>
-        <div *ngFor="let file of (files$|async)">{{file.name}}</div>
-      </div>
+      <div *appRole="['leader', 'contributor']" class="text">{{song.comment}}</div>
+
     </div>
 
     <app-button-row>
-      <button color="primary" mat-flat-button routerLink="edit">Bearbeiten</button>
-      <button mat-button routerLink="../">Schließen</button>
+      <button *appRole="['contributor']" mat-button routerLink="edit">Bearbeiten</button>
     </app-button-row>
 
   </app-card>
-  <app-card>
-
+  <app-card *ngIf="!!(files$|async)" heading="Anhänge">
+    <div *ngFor="let file of (files$|async)">{{file.name}}</div>
   </app-card>
 </div>