open-law/app/templates/book/settings.html

<!-- prettier-ignore -->
{% extends 'base.html' %}
{% include 'book/add_contributor_modal.html' %}

{% block content %}
<!-- Hide right_sidebar -->
<!-- prettier-ignore -->
{% block right_sidebar %} {% endblock %}

<div class="p-5">
  <div class="flex justify-between ml-4 mb-3">
    <h1 class="text-2xl font-extrabold dark:text-white">Settings</h1>
  </div>

  <form action="{{ url_for('book.edit', book_id=book.id) }}" method="post" class="mb-0 flex flex-col space-y-2 w-1/2">
    {{ form_hidden_tag() }}
    <input value="{{book.id}}" type="text" name="book_id" id="book_id" class="hidden" placeholder="Book id" required>
      <div>
        <label for="label" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Label</label>
        <input value="{{book.label}}" type="text" name="label" id="label" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="My Book" required>
      </div>
    <div>
      <button type="submit" class="text-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Save</button>
    </div>
  </form>
</div>

<div class="p-5">
  <div class="flex justify-between ml-4 mb-2">
    <h1 class="text-2xl font-extrabold dark:text-white">Contributors</h1>
    <!-- prettier-ignore -->
    <button
      type="button" data-modal-target="add-contributor-modal" data-modal-toggle="add-contributor-modal"
      class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-1"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg>
      Add
    </button>
  </div>

  <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
      <thead
        class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
        <tr>
          <th scope="col" class="px-6 py-3">Username</th>
          <th scope="col" class="px-6 py-3">Role</th>
          <th scope="col" class="px-6 py-3">Action</th>
        </tr>
      </thead>
      <tbody>
        {% for contributor in book.contributors %}
        <tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-700">
          <td class="px-6 py-4">{{ contributor.user.username }}</td>
          <td class="px-6 py-4">
            <form action="{{ url_for('book.edit_contributor_role', book_id=book.id) }}" method="post" class="mb-0 flex space-x-2">
              {{ form_hidden_tag() }}
              <input type="hidden" name="user_id" id="user_id" value="{{ contributor.user_id }}" />
              <select
                id="role"
                name="role"
                data-user-id="{{ contributor.user.id }}"
                class="contributor-role-select block w-1/2 py-1.5 px-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
              >

                {% for role in roles if role.value %}
                  <option
                    {% if contributor.role == role %} selected {% endif %}
                    value="{{ role.value }}">
                    {{ role.name.title() }}
                  </option>
                {% endfor %}
              </select>
              <button type="submit" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-1 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700">Save</button>
            </form>
          </td>
          <td class="px-6 py-4">
            <!-- prettier-ignore -->
            <form action="{{ url_for('book.delete_contributor', book_id=book.id) }}" method="post" class="mb-0">
              {{ form_hidden_tag() }}
              <input type="hidden" name="user_id" id="user_id" value="{{ contributor.user_id }}" />

              <button type="submit" class="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-sm rounded-lg text-sm px-5 py-1.5 dark:bg-red-600 dark:hover:bg-red-700 focus:outline-none dark:focus:ring-red-800">Delete</button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{% endblock %}