<%- include('../catalogCommerce/crudAssets.ejs') %>
<section id="multiple-column-form">
  <div class="row match-height">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0"><%= title %></h5>
        </div>
        <div class="card-body">
          <div class="row mb-3">
            <div class="col-md-6 mb-2">
              <strong><%= i18n.__('attributes.nameAr') %>:</strong>
              <div><%= attribute.name?.ar || '' %></div>
            </div>
            <div class="col-md-6 mb-2">
              <strong><%= i18n.__('attributes.nameEn') %>:</strong>
              <div><%= attribute.name?.en || '' %></div>
            </div>
            <div class="col-md-6 mb-2">
              <strong><%= i18n.__('attributes.status') %>:</strong>
              <div>
                <% if (attribute.isActive) { %>
                  <span class="badge bg-label-success"><%= i18n.__('attributes.active') %></span>
                <% } else { %>
                  <span class="badge bg-label-danger"><%= i18n.__('attributes.inactive') %></span>
                <% } %>
              </div>
            </div>
            <div class="col-md-6 mb-2">
              <strong><%= i18n.__('common.date') %>:</strong>
              <div><%= moment(attribute.createdAt).locale(lang || 'ar').format('YYYY/MM/DD hh:mm A') %></div>
            </div>
          </div>

          <h5 class="mb-2"><%= i18n.__('attributes.sizes') %></h5>
          <div class="table-responsive mb-4">
            <% if (!(sizes || []).length) { %>
              <%- include('../includes/notFound.ejs') %>
            <% } else { %>
              <table class="table">
                <thead>
                  <tr>
                    <th><%= i18n.__('attributes.valueNameAr') %></th>
                    <th><%= i18n.__('attributes.valueNameEn') %></th>
                    <th><%= i18n.__('attributes.status') %></th>
                  </tr>
                </thead>
                <tbody>
                  <% sizes.forEach((item) => { %>
                    <tr>
                      <td><%= item.name?.ar || '' %></td>
                      <td><%= item.name?.en || '' %></td>
                      <td>
                        <% if (item.isActive) { %>
                          <span class="badge bg-label-success"><%= i18n.__('attributes.active') %></span>
                        <% } else { %>
                          <span class="badge bg-label-danger"><%= i18n.__('attributes.inactive') %></span>
                        <% } %>
                      </td>
                    </tr>
                  <% }) %>
                </tbody>
              </table>
            <% } %>
          </div>

          <h5 class="mb-2"><%= i18n.__('attributes.colors') %></h5>
          <div class="table-responsive">
            <% if (!(colors || []).length) { %>
              <%- include('../includes/notFound.ejs') %>
            <% } else { %>
              <table class="table">
                <thead>
                  <tr>
                    <th><%= i18n.__('attributes.valueNameAr') %></th>
                    <th><%= i18n.__('attributes.valueNameEn') %></th>
                    <th><%= i18n.__('attributes.colorPreview') %></th>
                    <th><%= i18n.__('attributes.colorCode') %></th>
                    <th><%= i18n.__('attributes.status') %></th>
                  </tr>
                </thead>
                <tbody>
                  <% colors.forEach((item) => { %>
                    <tr>
                      <td><%= item.name?.ar || '' %></td>
                      <td><%= item.name?.en || '' %></td>
                      <td>
                        <span style="display:inline-block;width:20px;height:20px;border-radius:50%;border:1px solid #ccc;background:<%= item.colorCode || '#fff' %>;vertical-align:middle;"></span>
                      </td>
                      <td><%= item.colorCode || '-' %></td>
                      <td>
                        <% if (item.isActive) { %>
                          <span class="badge bg-label-success"><%= i18n.__('attributes.active') %></span>
                        <% } else { %>
                          <span class="badge bg-label-danger"><%= i18n.__('attributes.inactive') %></span>
                        <% } %>
                      </td>
                    </tr>
                  <% }) %>
                </tbody>
              </table>
            <% } %>
          </div>

          <div class="d-flex justify-content-center mt-3">
            <a class="btn btn-primary me-1" href="/dashboard/attributes/edit/<%= attribute._id %>"><%= i18n.__('common.edit') %></a>
            <a class="btn btn-label-dribbble" href="<%= referer || '/dashboard/attributes' %>"><%= i18n.__('common.referer') %></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
