clubmanager/templates/dancers.rs.html

@use super::base_html;
@use super::components::return_to_main_html;
@use super::components::dancer_html;
@use cm_lib::models::Dancer;

@(dancers: Vec<Dancer>)

@:base_html({

<div class="fixed right-0 top-0 pr-4 pt-4">
  @:return_to_main_html()
</div>

<h1 class="text-4xl underline text-center pt-4 pb-6">
    Dancers
</h1>

<table class="m-auto table-auto w-4/5">
  <thead class="text-xs text-gray-700 bg-gray-50">
    <tr>
      <th scope="col" class="px-6 py-3">Name</th>
      <th scope="col" class="px-6 py-3">Stage Name</th>
      <th></th>
    </tr>
  </thead>

  <tbody id="dancer_list">
    <tr hx-target="this" class="bg-white even:bg-neutral-50 border-b">
      <form hx-post="/api/dancers" hx-swap="afterend"
        hx-on::after-request=" if(event.detail.successful) this.reset()">
        <td>
          <div class="relative">
            <input type="text" id="name" name="name"
              class="block px-2.5 pb-2.5 pt-4 w-full text-sm text-gray-900 bg-transparent rounded-lg border-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer"
              placeholder=" " />
            <label for="name"
              class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-1">
              Name
            </label>
          </div>
        </td>
        <td>
          <div class="relative">
            <input type="text" id="stage_name" name="stage_name"
              class="block px-2.5 pb-2.5 pt-4 w-full text-sm text-gray-900 bg-transparent rounded-lg border-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer"
              placeholder=" " />
            <label for="stage_name"
              class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-1">
              Stage Name
            </label>
          </div>
        </td>

        <td class="w-10 h-full">
          <button type="submit"
            class="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm w-full h-full">+</button>
        </td>

      </form>
    </tr>
    @for dancer in dancers.into_iter() {

    @:dancer_html(dancer)

    }
  </tbody>
</table>

})