{% extends "base.html" %}
{% block title %}Discord Settings — {{ club.name }}{% endblock %}

{% block content %}
{% include "club_ribbon.html" %}

<div class="card mb-4">
  <div class="card-header">Step 1 &mdash; Connect Discord server</div>
  <div class="card-body">
    {% if club.discord_server_id %}
      <p class="text-success mb-2">
        <i class="bi bi-check-circle-fill"></i>
        Discord server connected.
      </p>
    {% else %}
      <p class="text-muted small">
        Add the bot to your Discord server by clicking the button below, then run the
        <code>/connect</code> command in your server to link it to this club.
      </p>
    {% endif %}
    {% if oauth_url %}
      <a href="{{ oauth_url }}" target="_blank" rel="noopener" class="btn btn-primary mb-3">
        <i class="bi bi-discord"></i> Connect Discord server
      </a>
    {% else %}
      <div class="alert alert-warning mb-3">
        <i class="bi bi-exclamation-triangle"></i>
        <code>DISCORD_BOT_CLIENT_ID</code> is not configured on this server.
        Contact your site administrator.
      </div>
    {% endif %}

  </div>
</div>

<div class="card mb-4">
  <div class="card-header">Step 2 &mdash; Post the join button</div>
  <div class="card-body">
    <p class="text-muted small">
      Once you've added the bot to your server and given it a role above the ones it manages,
      type <code>/connect</code> and press enter, then, when prompted for a club_uuid, paste this connection code:
    </p>
    <div class="input-group mb-2">
      <input type="text" class="form-control font-monospace" id="joinCommand" value="{{ club_uuid }}" readonly>
      <button class="btn btn-outline-secondary" type="button"
              onclick="navigator.clipboard.writeText(document.getElementById('joinCommand').value)">
        <i class="bi bi-clipboard"></i> Copy
      </button>
    </div>
  </div>
</div>

<div class="card mb-4">
  <div class="card-header">Step 3 &mdash; Configure roles</div>
  <div class="card-body">
    <p class="text-muted small">
      Note that the bot needs a role that is placed <strong>above</strong> any roles it needs to manage in your
      server's role hierarchy.
    </p>
    <form method="post" action="{% url 'club_discord_fetch_roles' club.slug %}" class="mb-3">
      {% csrf_token %}
      <button type="submit" class="btn btn-secondary btn-sm">
        <i class="bi bi-arrow-clockwise"></i> Fetch roles from Discord
      </button>
    </form>

    {% if roles %}
      <table class="table table-sm align-middle">
        <thead>
          <tr>
            <th>Role name</th>
          </tr>
        </thead>
        <tbody>
          {% for role in roles %}
          <tr>
            <td>
              {% if role.bot_can_manage %}
                <a href="{% url 'club_discord_edit_role' club.slug role.pk %}">{{ role.role_name }}</a>
              {% else %}
                <span class="text-muted">{{ role.role_name }}</span>
              {% endif %}
              {% if role.is_paid_role %}<span class="badge bg-success ms-1">Paid</span>{% endif %}
              {% if role.is_unpaid_role %}<span class="badge bg-warning text-dark ms-1">Unpaid</span>{% endif %}
              {% if role.bap_points_for_role %}<span class="badge bg-info text-dark ms-1">BAP &ge; {{ role.bap_points_for_role }}</span>{% endif %}
              {% if role.hap_points_for_role %}<span class="badge bg-info text-dark ms-1">HAP &ge; {{ role.hap_points_for_role }}</span>{% endif %}
              {% if not role.bot_can_manage %}
                <span class="badge bg-secondary ms-1"
                      title="The bot&#39;s role must be above this role in the Discord hierarchy for it to be manageable">
                  <i class="bi bi-lock-fill"></i> Bot can&#39;t manage
                </span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    {% else %}
      <p class="text-muted small">No roles fetched yet. Click <em>Fetch roles from Discord</em> above.</p>
    {% endif %}
  </div>
</div>

<div class="card mb-4">
  <div class="card-header">Step 4 (optional) &mdash; Auction notifications</div>
  <div class="card-body">
    <p class="text-muted small">
      To have announcements about upcoming auctions in a channel, you can use the slash command <code>/auctions_here</code>. This only works <strong>after</strong> you have connected your Discord server to a club.
    </p>
    {% if club.auction_channel_id %}
      <p class="text-success mb-3">
        <i class="bi bi-check-circle-fill"></i>
        Auction announcements channel is set. Run <code>/auctions_here</code> in a different channel to change it.
      </p>
    {% else %}
      <p class="text-muted mb-3">
        <i class="bi bi-x-circle"></i>
        No auction announcements channel set. Run <code>/auctions_here</code> in the channel where you want announcements posted.
      </p>
    {% endif %}
    <form hx-post="{% url 'club_discord_config' club.slug %}" hx-trigger="change" hx-swap="none">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="create_events_for_auctions" id="createEventsCheck"
               {% if club.create_events_for_auctions %}checked{% endif %}>
        <label class="form-check-label" for="createEventsCheck">
          Automatically create a Discord scheduled event for each promoted auction
        </label>
      </div>
      <div class="text-muted small mt-1">
        Events are created once an auction is at least 24 hours old. In-person auctions span the start time
        to two hours later; online auctions span bidding open to bidding close. The event location links to
        the auction rules page.
      </div>
    </form>
  </div>
</div>

{% endblock %}