<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<div id="dialog-box" class="billing-detail-dialog">
  <header class="dialog-header header-white">
    <button type="button" class="close" (click)="dialogRef.close()">&times;</button>
  </header>
  <div class="dialog-content">
    <div *ngIf="notebook">
      <table class="detail-header">
        <tr>
          <td matTooltip="{{ notebook.name }}" matTooltipPosition="above">{{ notebook.name }}</td>
          <td>{{ notebook.template_name }}</td>
          <td class="status" ngClass="{{ notebook.status || ''}}">{{ notebook.status }}</td>
          <td>{{ notebook.shape }}</td>
        </tr>
      </table>
      <div class="billing-detail content-box">
        <mat-list>
          <mat-list-item class="list-header" [ngClass]="{'pr-3': notebook.billing.report_lines.length > 6}">
            <div class="resource-name ellipsis" [ngClass]="{ 'wide-name-field' : provider === 'azure' }">Name</div>
            <div class="service">Product</div>
<!--              <div class="resource-type" *ngIf="provider === 'aws'">Type</div>-->
            <div class="usage-date-start">Start</div>
            <div class="usage-date-end">End</div>
            <div class="cost-currency">Cost</div>
          </mat-list-item>
          <div class="scrolling-content" id="scrolling">
            <mat-list-item *ngFor="let item of notebook.billing.report_lines">
              <div class="resource-name ellipsis" [ngClass]="{ 'wide-name-field' : provider === 'azure' }"
                    matTooltip="{{ item.resource_name }}"
                    matTooltipPosition="above">
                    {{ item.resource_name }}
              </div>
              <div class="service">{{ item.product }}</div>
<!--                <div class="resource-type" >{{ item.resourse_type }}</div>-->
              <div class="usage-date-start ellipsis">{{ item.from.join('/') | localDate : 'shortDate'}}</div>
              <div class="usage-date-end ellipsis">{{ item.to.join('/') | localDate : 'shortDate'}}</div>
              <div class="cost-currency">{{ item.cost | localcurrency }}</div>
            </mat-list-item>
          </div>
        </mat-list>
        <div class="total">
          <strong>Total: </strong>{{ notebook.cost | localcurrency }}</div>
      </div>
    </div>
  </div>
</div>