Add timed bidding support with countdown displays and debug view

- Added `bidding_duration` field to `DraftSessionSettings` model and migration.
- Updated `DraftStateManager` to manage bidding start/end times using session settings.
- Extended WebSocket payloads to include bidding timer data.
- Added `DraftCountdownClock` React component and integrated into admin and participant UIs.
- Created new `DraftDebug` view, template, and front-end component for real-time state debugging.
- Updated utility functions to handle new timer fields in draft state.
- Changed script tags in templates to load with `defer` for non-blocking execution.

frontend/src/apps/draft/participant/DraftParticipant.jsx

@@ -7,6 +7,7 @@ import { DraftMessage, DraftPhases } from '../constants.js';
 import { fetchDraftDetails, handleUserIdentifyMessages, isEmptyObject } from "../common/utils.js";
 import { DraftMoviePool } from "../common/DraftMoviePool.jsx";
 import { ParticipantList } from "../common/ParticipantList.jsx";
+import { DraftCountdownClock } from "../common/DraftCountdownClock.jsx"
 import { handleDraftStatusMessages } from '../common/utils.js'
 
 const NominateMenu = ({socket, draftState, draftDetails, currentUser}) => {
@@ -30,7 +31,6 @@ const NominateMenu = ({socket, draftState, draftDetails, currentUser}) => {
   return (
     <div>
       <label>Nominate</label>
-      {draftState.draft_order[draftState.draft_index]}
       <div className="d-flex">
         <form onSubmit={requestNomination}>
         <select className="form-control" name="movie">
@@ -98,6 +98,7 @@ export const DraftParticipant = ({ draftSessionId }) => {
       <DraftMoviePool isParticipant={true} draftDetails={draftDetails} draftState={draftState}></DraftMoviePool>
 
       <NominateMenu socket={socket} currentUser={currentUser} draftState={draftState} draftDetails={draftDetails}></NominateMenu>
+      <DraftCountdownClock endTime={draftState.bidding_timer_end}></DraftCountdownClock>
     </div>
   );
 };