{{#if model}}
  <div class="accordion data-list" id="accordion-vehicle-management">
    {{#each model as |item index|}}
    <div class="data-list-item">
      <div
        class="hino-accordion-button data-list-accordion-button collapsed"
        id="data-heading-1"
        data-toggle="collapse"
        data-target="#collapse-{{ index }}"
        aria-expanded="true"
        aria-controls="collapse-{{ index }}"
      >
        <div class="d-flex align-items-center justify-content-between w-100 clickable">
          <h5 class="data-list-header">
              <span class="ordernum">
              {{#if pagination}}
                {{ add (mult pagination.per_page (sub pagination.current_page 1)) (add index 1) }}
              {{else}}
                {{ add index 1 }}
              {{/if}}
              </span>
            {{#if this.showErrorMessage}}
              {{#if (get-property item this.errorMessageAttribute) }}
              <span class="has-notification">
                {{get-property item (get-property (get table.columns 0) "key")}}
              </span>
              {{else}}
              {{get-property item (get-property (get table.columns 0) "key")}}
              {{/if}}
            {{else}}
            {{get-property item (get-property (get table.columns 0) "key")}}
            {{/if}}
          </h5>
          <i class="bx bx-chevron-down"></i>
        </div>
    </div>
      <div
        id="collapse-{{ index }}"
        class="hino-accordion-content data-list-content collapse"
        aria-labelledby="data-heading-{{ index }}"
        data-parent="#accordion-vehicle-management"
      >
	    {{#if this.navigateOnClick}}
        <div class="inner-wrapper" onclick={{transition-to (get-property (get table.columns 0) "uri") (get-property item "id") }}>
          <div class="row">
            {{#each table.columns as |column|}}
            <div class="col-12 col-md-6">
              <div class="detail-row-view">
                <span>{{column.name}}</span>
                {{#if column.type}}
                  {{#if (eq column.type "date")}}
                  <span class="data">{{if (and (not-eq (get-property item column.key) null) (not (is-empty (get-property item column.key)))) (moment-format (get-property item column.key) "DD/MM/YYYY") ""}}</span>
                  {{else if (eq column.type "datetime")}}
                
                  <span class="data">{{if (and (not-eq (get-property item column.key) null) (not (is-empty (get-property item column.key)))) (moment-format (get-property item column.key) "DD/MM/YYYY HH:mm") ""}}</span>
                  {{else if (eq column.type "number")}}
                  <span class="data">{{if (and (not-eq (get-property item column.key) null) (not (is-empty (get-property item column.key)))) (custom-format-number (get-property item column.key)) ""}}</span>
                  {{else}}
                   
                  <span class="data">{{get-property item column.key}}</span>  
                  {{/if}}
                {{else}}
                 
                  <span class="data">{{get-property item column.key}}</span>  
                {{/if}}
              </div>
            </div>
            {{/each}}
          </div>
		  </div>
      {{else}}
	    <div class="inner-wrapper">
		    <div class="row">
            {{#each table.columns as |column|}}
            <div class="col-12 col-md-6">
              <div class="detail-row-view">
                <span>{{column.name}}</span>
                {{#if column.type}}
                  {{#if (eq column.type "date")}}
                  <span class="data">{{moment-format (get-property item column.key) "DD/MM/YYYY"}}</span>
                  {{else if (eq column.type "datetime")}}
                  
                 <span class="data">{{if (and (not-eq (get-property item column.key) null) (not (is-empty (get-property item column.key)))) (moment-format (get-property item column.key) "DD/MM/YYYY HH:mm") ""}}</span>
                  {{else if (eq column.type "number")}}
                  <span class="data">{{custom-format-number (get-property item column.key)}}</span>
                  {{else}}
                  
                  <span class="data">{{get-property item column.key}}</span>  
                  {{/if}}
                {{else}}
                
                  <span class="data">{{get-property item column.key}}</span>  
                {{/if}}
              </div>
            </div>
            {{/each}}
        </div>
      </div>
	    {{/if}}
      {{#if this.showActionButton }}
      <div class="row">
        <div class="col-12 mb-2">
          <span class="float-right">
          {{#if this.showEditButton}}
          <i onclick={{transition-to (get-property (get table.columns 0) "editUri") (get-property item "id")}} class="bx bx-edit-alt clickable"></i>
          {{/if}}
          {{#if this.showDeleteButton}}
          <i {{action "deleteRow" item}} class="bx bx-trash-alt clickable ml-2"></i>	
          {{/if}}
          {{#if this.showErrorMessage}}
            {{#if (get-property item this.errorMessageAttribute) }}
            <i {{action "showMessageError" item}} class="bx bxs-message-square-detail ml-2 text-hino-red" data-toggle="modal" data-target="#modal-error"></i>
            {{/if}}
          {{/if}}
          </span>
        </div>
      </div>
      {{else}}
      {{#if this.showErrorMessage}}
      {{#if (get-property item this.errorMessageAttribute) }}
      <div class="row">
        <div class="col-12 mb-2">
          <span class="float-right">
          <i {{action "showMessageError" item}} class="bx bxs-message-square-detail ml-2 text-hino-red" data-toggle="modal" data-target="#modal-error"></i>
          </span>
        </div>
      </div>
      {{/if}}
      {{/if}}
      {{/if}}
      </div>
      </div>
    {{/each}}
  </div>
{{else}}
  <h4 class="text-center">Data not found</h4>
{{/if}}
<div class="modal" id="modal-error" role="dialog">
    <div class="modal-dialog popup-error-message">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="messageModalLabel">
            Message
          </h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          {{ this.errorMessage }}
        </div>
      </div>
    </div>
  </div>