<div class="row">
  <div class="col-lg-12 mt-3">
    <p>
      <a title="Main Module" href="/manage-material/list" style="color: black;">
        <i class="fa fa-chevron-circle-left"></i> &nbsp;
        Zurück zur Materialliste
      </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>

                <!-- Material Image -->
                <tr>
                  <td width="20%">Bild</td>
                  <td>
                    <% if (dataInfo.image) { %>
                      <img src="/uploads/manage-material/<%= dataInfo.image %>" 
                           alt="Material Image" 
                           style="max-width:100px;object-fit:cover;border-radius:5px;">
                    <% } else { %>
                      <span>-</span>
                    <% } %>
                  </td>
                </tr>

                <!-- Material Name -->
                <tr>
                  <td>Materialname</td>
                  <td><%= dataInfo.material_name %></td>
                </tr>

                <!-- Description -->
                <tr>
                  <td>Beschreibung</td>
                  <td>
                    <%- dataInfo.description
                      ? dataInfo.description.replace(/<\/?[^>]+(>|$)/g, "")
                      : "-" %>
                  </td>
                </tr>

                <!-- Unit (GERMAN Translation) -->
                <tr>
                  <td>Einheit</td>
                  <td>
                    <% if (dataInfo.unit === 'pcs') { %> Stück
                    <% } else if (dataInfo.unit === 'kg') { %> Kilogramm
                    <% } else if (dataInfo.unit === 'meter') { %> Meter
                    <% } else if (dataInfo.unit === 'litre') { %> Liter
                    <% } else { %> - <% } %>
                  </td>
                </tr>

                <!-- Quantity (no decimals) -->
                <tr>
                  <td>Menge</td>
                  <td><%= Number(dataInfo.quantity) %></td>
                </tr>

                <!-- Created Date -->
                <tr>
                  <td>Erstellt am</td>
                  <td>
                    <%= dataInfo.created_at 
                      ? new Date(dataInfo.created_at).toLocaleDateString('de-DE')
                      : "-" %>
                  </td>
                </tr>

                <!-- Updated Date -->
                <tr>
                  <td>Aktualisiert am</td>
                  <td>
                    <%= dataInfo.updated_at 
                      ? new Date(dataInfo.updated_at).toLocaleDateString('de-DE')
                      : "-" %>
                  </td>
                </tr>

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

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