<div class="card">
  <div class="card-header  border-0">
    <div class="card-title">{{'Ticket Information' | translate}}</div>
  </div>
  <div class="card-body pt-2 ps-0 pe-0 pb-0">
    <div class="table-responsive tr-lastchild">
      <table class="table mb-0 table-information">
        <tbody>

          <tr>
            <td>
              <span class="w-50">{{'Ticket ID' | translate}}</span>
            </td>
            <td>:</td>
            <td>
              <span class="font-weight-semibold">#{{ ticketDataParent?.ticket?.ticket_id }}</span>
              @if (!ticketDataParent) {
                <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
              }
            </td>
          </tr>
          @if(ticketDataParent?.ticket?.ccemails?.length){
            <tr>
                <td>
                    <span className="w-50">{{'CC Mail' | translate }}</span>
                </td>
                <td>:</td>
                <td>
                    <span className="font-weight-semibold">{{ ticketDataParent?.ticket?.ccemails?.[0]?.ccemails }}</span>
                </td>
            </tr>
          }
          <tr>
            <td>
              <span class="w-50">{{'Category' | translate}}</span>
            </td>
            <td>:</td>
            <td>
              @if (ticketDataParent?.ticket?.category_id && ticketDataParent?.ticket?.category) {
                <span class="font-weight-semibold">{{ ticketDataParent?.ticket?.category.name}}</span>
              } @else {
                <span class="font-weight-semibold">~</span>
              }

            </td>
          </tr>
          @if (ticketDataParent?.ticket?.subcategory) {
            <tr>
              <td>
                <span class="w-50">{{'SubCategory' | translate}}</span>
              </td>
              <td>:</td>
              <td>
                <span class="font-weight-semibold">{{ticketDataParent?.ticket?.subcategoriess.subcategoryname}}</span>
                @if (!ticketDataParent) {
                  <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
                }
              </td>
            </tr>
          }

          @if (ticketDataParent?.ticket?.item_name != null) {
            <tr>
              <td>
                <span class="w-50">{{'Item name' | translate}}</span>
              </td>
              <td>:</td>
              <td>
                <span class="font-weight-semibold">{{ ticketDataParent?.ticket?.item_name }}</span>
                @if (!ticketDataParent) {
                  <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
                }
              </td>
            </tr>
          }
          @if (ticketDataParent?.ticket?.project) {
            <tr>
              <td>
                <span class="w-50">{{'Project' | translate}}</span>
              </td>
              <td>:</td>
              <td>
                <span class="font-weight-semibold">{{ ticketDataParent?.ticket?.project }}</span>
                @if (!ticketDataParent) {
                  <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
                }
              </td>
            </tr>
          }
          @if (ticketDataParent?.ticket?.priority) {
            <tr>
              <td>
                <span class="w-50">{{'Priority' | translate}}</span>
              </td>
              <td>:</td>
              <td id="priorityid">
                @if (ticketDataParent?.ticket?.priority == 'Low') {
                  <span class="badge badge-success-light">{{ ticketDataParent?.ticket?.priority | translate
                  }}</span>
                } @else {
                  @if (ticketDataParent?.ticket?.priority == 'High') {
                    <span class="badge badge-danger-light">{{
                    ticketDataParent?.ticket?.priority | translate}}</span>
                  } @else {
                    @if (ticketDataParent?.ticket?.priority == 'Critical') {
                      <span class="badge badge-danger-dark">{{
                      ticketDataParent?.ticket?.priority | translate}}</span>
                    } @else {
                      <span class="badge badge-warning-light">{{ ticketDataParent?.ticket?.priority | translate
                      }}</span>
                    }
                  }
                }
                @if (!ticketDataParent) {
                  <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
                }
              </td>
            </tr>
          } @else {
            <tr>
              <td>
                <span class="w-50">{{'Priority' | translate}}</span>
              </td>
              <td>:</td>
              <td>
                ~
              </td>
            </tr>
          }

          <tr>
            <td>
              <span class="w-50">{{'Open Date' | translate}}</span>
            </td>
            <td>:</td>
            <td>
              <span class="font-weight-semibold">{{ ticketDataParent?.ticket?.created_at | custtimezone : ticketDataParent?.setting?.original?.date_format : undefined : user?.timezone ?? 'UTC' }}</span>
              
              @if (!ticketDataParent) {
                <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
              }
            </td>
          </tr>
          <tr>
            <td>
              <span class="w-50">{{'Status' | translate}}</span>
            </td>
            <td>:</td>
            <td>
              @if (ticketDataParent?.ticket?.status == 'New') {
                <span class="badge badge-burnt-orange">{{ ticketDataParent?.ticket?.status | translate }}</span>
              } @else {
                @if (ticketDataParent?.ticket?.status == 'Re-Open') {
                  <span class="badge badge-teal">{{ ticketDataParent?.ticket?.status  | translate}}</span>
                } @else {
                  @if (ticketDataParent?.ticket?.status == 'Inprogress') {
                    <span class="badge badge-info">{{ ticketDataParent?.ticket?.status | translate }}</span>
                  } @else {
                    @if (ticketDataParent?.ticket?.status == 'On-Hold') {
                      <span class="badge badge-warning">{{ ticketDataParent?.ticket?.status | translate
                      }}</span>
                    } @else {
                      <span class="badge badge-danger">{{ ticketDataParent?.ticket?.status | translate
                      }}</span>
                    }
                  }
                }
              }
              @if (!ticketDataParent) {
                <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
              }
            </td>
          </tr>

          @if (ticketDataParent?.ticket?.ticketviolation == 'on') {
            <tr>
              <td>
                <span class="w-50">{{'Ticket Violation' | translate | titlecase}}</span>
              </td>
              <td>:</td>
              <td>
                <button class="border-0 bg-transparent">
                  <i class="fa fa-exclamation-triangle text-danger"></i>
                </button>
              </td>
            </tr>
          }
          @if (ticketDataParent?.ticket?.replystatus != null && ticketDataParent?.ticket?.replystatus != 'Solved' || ticketDataParent?.ticket?.replystatus == 'Unanswered' || ticketDataParent?.ticket?.replystatus == 'Waiting for response') {
            <tr>
              <td>
                <span class="w-50">{{'Reply Status' | translate}}</span>
              </td>
              <td>:</td>
              <td>
                @if (ticketDataParent?.ticket?.replystatus == 'Solved') {
                  <span class="badge badge-success">{{ ticketDataParent?.ticket?.replystatus | translate }}</span>
                } @else {
                  @if (ticketDataParent?.ticket?.replystatus == 'Unanswered') {
                    <span class="badge badge-danger-light">{{ ticketDataParent?.ticket?.replystatus | translate
                    }}</span>
                  } @else {
                    @if (ticketDataParent?.ticket?.replystatus == 'Waiting for response') {
                      <span class="badge badge-warning">{{ ticketDataParent?.ticket?.replystatus | translate
                      }}</span>
                    }
                  }
                }
                @if (!ticketDataParent) {
                  <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
                }
              </td>
            </tr>
          }

          @if (ticketDataParent?.ticket?.ticket_customfield?.length) {
            @for (customfield of ticketDataParent?.ticket?.ticket_customfield; track customfield) {
              @if (customfield.fieldtypes != 'textarea' && customfield?.values?.length) {
                <tr>
                  <td>{{customfield.fieldnames}}</td>
                  <td>: </td>
                  <td>
                    @if (customfield.privacymode == '1') {
                    } @else {
                      {{customfield.value}}
                    }
                  </td>
                </tr>
                <tr>
                  <td>{{customfield?.fieldnames}}</td>
                  <td>:</td>
                  <td>{{customfield?.values}} </td>
                </tr>
              }
            }
          }
        </tbody>
      </table>
    </div>
  </div>
</div>