<div class="row">
  <div class="col-lg-12 mt-3">
    <p>
      <a title="Main Module" href="/packages/list" style="color: black;">
        <i class="fa fa-chevron-circle-left"></i> &nbsp;
        Zurück zur Datenliste Artikel-Nr. verwalten
      </a>
    </p>

    <div class="card card-info mt-3">
      <div class="card-header align-items-center d-flex">
        <h4 class="card-title mb-0 flex-grow-1">
          <%= sectionTitle %>
        </h4>
      </div>

      <div class="card-body">
        <div class="row g-3">
          <div class="table-responsive">
            <table id="table-detail" class="table table-striped">
              <tbody>

                <tr>
                  <td width="20%">Produkt (Modell)</td>
                  <td>
                    <%= dataInfo.model_name || '-' %>
                  </td>
                </tr>

                <tr>
                  <td>Artikel-Nr</td>
                  <td><%= dataInfo.package_number || '-' %></td>
                </tr>

                <tr>
                  <td>Lieferant</td>
                  <td><%= dataInfo.supplier || '-' %></td>
                </tr>

                <tr>
                  <td>Erstellt am</td>
                  <td>
                    <%= dataInfo.created_at ? (()=> {
                      const d = new Date(dataInfo.created_at);
                      const pad = n => n.toString().padStart(2, '0');
                      return `${pad(d.getDate())}.${pad(d.getMonth() + 1)}.${d.getFullYear()}`;
                    })() : '-' %>
                  </td>
                </tr>

                <tr>
                  <td>Aktualisiert am</td>
                  <td>
                    <%= dataInfo.updated_at ? (()=> {
                      const d = new Date(dataInfo.updated_at);
                      const pad = n => n.toString().padStart(2, '0');
                      return `${pad(d.getDate())}.${pad(d.getMonth() + 1)}.${d.getFullYear()}`;
                    })() : '-' %>
                  </td>
                </tr>

                <!-- MATERIALS USED -->
               <tr>
  <td>Materialien</td>
  <td>
    <% if (Array.isArray(dataInfo.materials_used) && dataInfo.materials_used.length > 0) { %>
      <table class="table table-bordered w-75">
        <thead>
          <tr>
            <th>Material</th>
            <th>Menge</th>
          </tr>
        </thead>
        <tbody>
          <% dataInfo.materials_used.forEach(item => { %>
            <tr>
              <td><%= item.material_name %></td>
              <td><%= item.quantity %> <%= item.unit %></td>
            </tr>
          <% }) %>
        </tbody>
      </table>
    <% } else { %>
      -
    <% } %>
  </td>
</tr>


              </tbody>
            </table>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
