<template>
  <div class="container-fluid py-4">
    <div class="row">
      <div class="col-lg-8 mx-auto">
        <div class="card mb-4">
          <slot name="header"></slot>

          <div class="card-body p-3 pt-0">
            <hr class="horizontal dark mt-0 mb-4" />

            <!-- Product Lines Section -->
            <div class="row">
              <div class="col-12">
                <slot name="lines"></slot>
              </div>
            </div>

            <hr class="horizontal dark mt-4 mb-4" />

            <div class="row">
              <!-- Tracking/Timeline Section -->
              <div class="col-lg-3 col-md-6 col-12">
                <slot name="timeline"></slot>
              </div>

              <!-- Supplier Info Section -->
              <div class="col-lg-5 col-md-6 col-12">
                <slot name="billing"></slot>
              </div>

              <!-- Summary Section -->
              <div class="col-lg-3 col-12 ms-auto">
                <slot name="summary"></slot>
              </div>
            </div>
          </div>
          <div class="card-footer p-3">
            <slot name="actions"></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup></script>
