user_management.html

{% extends 'container.html' %}


{% block content %}

<style>

main {
  background-color: #f0f0f0; /* Light gray background */
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 80%; /* Adjust width as needed */
}

.content {
  border: solid 1px #ddd; /* Light border for content area */
  border-radius: 5px;
  padding: 10px;
  background-color: #fff; /* White background for content */
}

.header_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.header_wrap h2 {
  font-size: 1.2rem;
  margin: 0;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
}

.user-table th,
.user-table td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}
.content {
  background-color: rgba(255, 255, 255, 0.9); /* Acrylic effect */
  backdrop-filter: blur(5px);
}

.user-table {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.user-table tr:hover {
  background-color: rgba(0, 0, 0, 0.05); /* Reveal Highlight */
}

.action-form button:hover {
  background-color: #e0e0e0;
  transform: scale(1.05);
  transition: all 0.2s ease-in-out;
}
/* Table Styles */
.table-class {
  width: 100%;  /* Ensures table takes up full width */
  border-collapse: collapse;
  border-radius: 8px; /* Adds subtle rounded corners */
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); /* Adds a light shadow for depth */
  margin-bottom: 1rem; /* Adds some spacing below the table */
}

.table-class thead {
  background-color: #f2f2f2; /* Light gray background for header */
}

.table-class th,
.table-class td {
  size: 100px;
  padding: 10px 15px; /* Consistent padding for cells */
  border: 1px solid #ddd; /* Light gray borders */
  text-align: left; /* Align content to the left */
}
td{
  min-width:200px;
  width: fit-content;
}
th{
  min-width:200px;
}
tr{
  display: flex;
  flex-direction: row;
}
/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
  .table-class {
    display: block;
    overflow-x: auto; /* Allows horizontal scrolling on small screens */
  }

  .table-class thead tr {
    display: block;
  }

  .table-class th,
  .table-class td {
    display: block;
    border: none;
    border-bottom: 1px solid #ddd; /* Maintains bottom border for rows */
    padding: 10px;
  }

  .table-class th:before {
    content: attr(data-label); /* Displays data-label attribute for headers */
    display: block;
    font-weight: bold;
    margin-bottom: 5px; /* Adds a small gap between label and content */
  }
}

/* Style the Buttons (can be further customized) */
.table-class button {
  background: none;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out; /* Smooth hover effect */
}

.table-class button:hover {
  background-color: #eee; /* Light background on hover */
}

.table-class button i {
  margin-right: 5px; /* Adds a small margin between icon and text */
}

/* Optional: Centering Content in Cells (if desired) */
.table-class td {
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>
<div class="content">
  <div class="header_wrap" style="width: 100%">
    <table class="table table-striped table-class" id="table-id">
      <thead>
        <tr>
          <th>User</th>
          <th>Mail</th>
          <th>Role</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        {% for compte_user in users %}
        <tr>
          <td>{{ compte_user[1] }}</td>
          <td>{{ compte_user[2] }}</td>
          <td id="test">{% if compte_user[3] == True %} admin {% else %}  user {% endif %}</td>
          
          <td>
            {% if user['is_admin'] == True %}
            <form
              id="switchForm"
              action="{{ url_for('switch_role', user_id=compte_user[0]) }}"
              method="post"
            >
              <button
                type="submit"
                id="completed-task"
                style="background: none; padding: 0px; border: none"
                
              >
              switch role
                <i class="icon-pen"></i>
          </button>
              </div>
            </form>
            {% endif %}
            <form
              id="deleteForm"
              action="{{ url_for('delete_user', user_id=compte_user[0]) }}"
              method="post"
            >
              <button
                type="submit"
                id="completed-task"
                style="background: none; padding: 0px; border: none"
              >
                delete
                <i class="icon-trash"></i>
              </button>
            </form>
          </td>
        </tr>
        {% endfor %}
        <tr><form id="registerForm"action="{{ url_for('register') }}"method="post">
      <td>
        <input type="text" name="username" placeholder="Username">
      </td>
      <td>
      <input type="text" name="email" placeholder="Email">
      </td>
      <td>
        <input type="password" name="password" placeholder="Password">
      </td>

    <td>
        <button type="submit">Register</button>
      </td></form></tr>
      </tbody>
    </table>
    <!-- Liens de pagination -->
    <div class="pagination"></div>
    
  </div>


  {% endblock %}
</div>

<script type="text/javascript">
  deleteForm = document.getElementById("deleteForm");
  deleteIcon = document.getElementById("icon-trash");
  switchForm = document.getElementById("switchForm");
  switchIcon = document.getElementById("icon-pen");
  test = document.getElementById("test");

  test.addEventListener("click", function () {
    console.log("test clicked");
  });
  deleteIcon.addEventListener("click", function () {
    deleteForm.submit();
  });

  switchIcon.addEventListener("click", function () {
    switchForm.submit();
  });
</script>