<!DOCTYPE html>
<html lang="en">
<head>

  <style>
    td.center {
      text-align:left;
    }

    td {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 150px;  /* Or whatever width you want */
    }

  </style>

  <%- include('../../partials/head.ejs') %>

</head>
<body>

<%- include('../../partials/project/scripts.ejs') %>
  <%- include('../../partials/project/navbar.ejs') %>

  <%- include('../../partials/modal/confirmation.ejs') %>
  <%- include('../../partials/modal/error.ejs') %>

  <link href="./assets/css/jquery.dataTables.min.css" rel="stylesheet"></script>
  <script src="./assets/js/jquery.dataTables.min.js"></script>
  <script src="./assets/js/fontawesome.js"></script>

  <div class="container-fluid">
    <div class="row flex-nowrap">
      <%- include('../../partials/project/sidebar.ejs') %>
      <div class="col py-3">
        <div class="content-header">
          <h3><%= project?.name %></h3>
        </div>
      <div class="row">
        <!--<div class="col-sm-12 mb-3 mb-sm-0">-->
        <div class="card overflow-auto" style="width:100%">
          <div class="card-body">
            <table id="models" class="display">
              <caption><b>Models</b></caption>
              <thead>
                <tr>
                  <th></th>
                  <th>model</th>
                  <th>description</th>
                </tr>
              </thead>
            </table>
          </div>
        </div>
        <!--</div>-->
      </div>
    </div>
  </div>

  <script src="./assets/js/ace.js"></script>
  <script type="module" src="./app.mjs"></script>

  <script>
    var t;
    var id;
    let models = <%- JSON.stringify(models) %>;

    $(document).ready(function () {
      t = $('#models').DataTable();

      models.forEach((item, i) => {
        addRow(item.id,item.name,item.description);
      });
    });

    function addRow(id,model,description){
      t.row.add([`
        <button id="`+id+`" onclick="deleteModel('`+id+`');" type="button" class="delete btn btn-secondary btn-sm">
          <i class="bi bi-folder-x"></i>
        </button>`,
        `<a href="../../../model/`+id+`/devices">`+model+`</a>`,
        description]).draw(true);
    }

    function deleteModel(model_id){
      id = model_id;
      $('#modalConfirmation').modal('show');
    }

    $("#modalProceed").click(()=>{
      api.deleteModel(id,(err,res)=>{
        if(err){
          $('#error').text("Your request cannot be executed");
          $('#suggestion').text(err);
          $('#modalError').modal('show');
        }else location.reload();
      });
    })

  </script>
</body>
</html>
