{% if LOTTERY_ENABLED %}
<div
  class="modal fade"
  id="lotteryModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="lotteryModalTitle"
  aria-hidden="true"
>
  <div class="modal-dialog lottery-modal--dialog" role="document">
    <div class="modal-content lottery-modal--content">
      <button
        class="close lottery-modal--close"
        data-bs-dismiss="modal"
        aria-label="Close"
      >
        <span aria-hidden="true"><i class="far fa-times"></i></span>
      </button>
      <div class="lottery-modal--wrapper">
        <div class="lottery-modal--image">
          <img src="/assets/images/rDrama/lotterymodal.webp?v=2" />
          <img
            id="lotteryTicketPulled"
            src="/assets/images/rDrama/lotterymodalactive.gif?v=2"
            style="display: none"
          />
        </div>
        <div class="lottery-modal--stats">
          {% if v.admin_level > 2 %}
          <div
            class="lottery-modal--stat"
            style="position: relative; padding-top: 1rem"
          >
            <i
              class="fas fa-broom"
              style="
                position: absolute;
                top: -8px;
                right: -8px;
                font-size: 20px;
              "
            >
            </i>
            <button
              type="button"
              class="btn btn-danger"
              id="endLotterySession"
              style="display: none"
              onclick="endLotterySession()"
            >
              End Current Session
            </button>
            <button
              type="button"
              class="btn btn-success"
              id="startLotterySession"
              style="display: none"
              onclick="startLotterySession()"
            >
              Start New Session
            </button>
          </div>
          {% endif %}
          <div class="lottery-modal--stat">
            <div class="lottery-modal--stat-keys">
              <div>Prize</div>
              <div>Time Remaining</div>
              <div>Tickets Sold This Session</div>
              <div>Participants This Session</div>
            </div>
            <div class="lottery-modal--stat-values">
              <div>
                <img
                  id="prize-image"
                  alt="coins"
                  class="mr-1 ml-1"
                  data-bs-toggle="tooltip"
                  data-bs-placement="bottom"
                  height="13"
                  src="/assets/images/rDrama/coins.webp?v=2"
                  title=""
                  aria-label="coins"
                  data-bs-original-title="coins"
                  style="display: none; position: relative; top: -2px"
                />
                <span id="prize">-</span>
              </div>
              <div id="timeLeft">-</div>
              <div id="ticketsSoldThisSession">-</div>
              <div id="participantsThisSession">-</div>
            </div>
          </div>
          <div class="lottery-modal--stat">
            <div class="lottery-modal--stat-keys">
              <div>Tickets Owned This Session</div>
              <div>Total Tickets Owned</div>
              <div>Total Winnings</div>
            </div>
            <div class="lottery-modal--stat-values">
              <div id="ticketsHeldCurrent">-</div>
              <div id="ticketsHeldTotal">-</div>
              <div id="winnings">-</div>
            </div>
          </div>
          <button
            type="button"
            class="btn btn-success lottery-modal--action"
            id="purchaseTicket"
            onclick="purchaseLotteryTicket()"
            disabled="true"
          >
            Purchase 1 for
            <img
              alt="coins"
              class="mr-1 ml-1"
              data-bs-toggle="tooltip"
              data-bs-placement="bottom"
              height="13"
              src="/assets/images/rDrama/coins.webp?v=2"
              title=""
              aria-label="coins"
              data-bs-original-title="coins"
            />

            12
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Success -->
  <div
    class="toast"
    id="lottery-post-success"
    style="
      position: fixed;
      bottom: 1.5rem;
      margin: 0 auto;
      left: 0;
      right: 0;
      width: 275px;
      z-index: 1000;
    "
    role="alert"
    aria-live="assertive"
    aria-atomic="true"
    data-bs-animation="true"
    data-bs-autohide="true"
    data-bs-delay="5000"
  >
    <div class="toast-body bg-success text-center text-white">
      <i class="fas fa-comment-alt-smile mr-2"></i
      ><span id="lottery-post-success-text"></span>
    </div>
  </div>

  <!-- Error -->
  <div
    class="toast"
    id="lottery-post-error"
    style="
      position: fixed;
      bottom: 1.5rem;
      margin: 0 auto;
      left: 0;
      right: 0;
      width: 275px;
      z-index: 1000;
    "
    role="alert"
    aria-live="assertive"
    aria-atomic="true"
    data-bs-animation="true"
    data-bs-autohide="true"
    data-bs-delay="5000"
  >
    <div class="toast-body bg-danger text-center text-white">
      <i class="fas fa-exclamation-circle mr-2"></i
      ><span id="lottery-post-error-text"></span>
    </div>
  </div>
</div>

<script src="/assets/js/lottery_modal.js?v=249" data-cfasync="false"></script>
{% endif %}