<div class="container centered">
  <div class="row">
    <div class="col-12">
      <h1>Image uploaded by {{ imageUser?.username }}</h1>
    </div>

    <div class="col-12" *ngIf="image !== null">
      <h3>Uploaded {{ image.created | amTimeAgo }}</h3>
    </div>

    <div class="col-12 py-3">
      <picsur-img class="uploadedimage" [src]="previewLink"></picsur-img>
    </div>

    <div class="col-md-6 col-12">
      <copy-field label="Image URL" [value]="imageLinks.source"></copy-field>
    </div>

    <div class="col-md-6 col-12">
      <mat-form-field appearance="outline" color="accent">
        <mat-label>Image Format</mat-label>
        <mat-select
          (valueChange)="selectedFormat($event)"
          [value]="setSelectedFormat"
        >
          <mat-option *ngFor="let format of formatOptions" [value]="format.key">
            {{ format.value }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>

    <div class="col-12 mb-3">
      <mat-divider class="" [inset]="false"></mat-divider>
    </div>

    <div class="col-md-6 col-12">
      <copy-field label="Markdown" [value]="imageLinks.markdown"></copy-field>
    </div>
    <div class="col-md-6 col-12">
      <copy-field label="HTML" [value]="imageLinks.html"></copy-field>
    </div>
    <div class="col-md-6 col-12">
      <copy-field label="BBCode" [value]="imageLinks.bbcode"></copy-field>
    </div>
    <div class="col-md-6 col-12">
      <copy-field label="Rst" [value]="imageLinks.rst"></copy-field>
    </div>
  </div>
</div>

<speed-dial
  icon="menu"
  icon-hover="download"
  tooltip="Download the image"
  [open-on-hover]="true"
  (main-click)="download()"
>
  <button mat-mini-fab matTooltip="Customize Image" (click)="customize()">
    <mat-icon> tune </mat-icon>
  </button>
  <button mat-mini-fab matTooltip="Share image" (click)="share()">
    <mat-icon> share </mat-icon>
  </button>
</speed-dial>
