{% extends "otree/Session.html" %}


{% block content %}
  {{ super() }}

  {% if use_browser_bots %}
    <div class="alert alert-info" role="alert">
      <p>
        Links will play automatically with browser bots.
        (because the session config has <code>use_browser_bots=True</code>).
      </p>
    </div>
  {% endif %}

  {% if is_defined('room') %}

    <div class="alert alert-info">
      <p>
        This session is taking place in the room
        {# apply underline because alert-info makes blue link on blue background invisible #}
        <a style="text-decoration: underline"
           href="{% url "RoomWithoutSession" room.name %}">{{ room.display_name }}</a>.
      </p>
    </div>

    {% include "otree/includes/RoomParticipantLinks.html" %}

    {# otherwise, if a participant closes their browser, there is no way for them to resume playing. #}
    {% if not room.has_participant_labels %}
      <h4>Single-use links</h4>

      <p>
        Below are single-use links for this session only.
        You can use these in the event that you need to open (or re-open) a specific
        participant's link.
      </p>

      <details>
        <summary>Show/Hide</summary>
        <table class="table">
          {% for participant_url in participant_urls %}
            <tr>
              <td><strong>P{{ forloop.counter }}</strong></td>
              <td><a href="{{ participant_url }}" class="participant-link" target="_blank">{{ participant_url }}</a>
              </td>
            </tr>
          {% endfor %}
        </table>
      </details>

    {% endif %}

  {% elif session.is_demo %}

    <br>
    <p><i>
      Below are temporary links for testing and demonstration.
      To launch a real study, either create persistent links by setting up a <a href="{% url 'Rooms' %}">room</a>,
      or create a session through the <a href="{% url 'Sessions' %}">sessions page</a>.
    </i>
    </p>

    <p><i>
      Choose one of the following options to play the session:
    </i></p>
    <br>

    <h4>Combined views</h4>
    <div style="display: flex; flex-direction: row; gap: 10px;">
      <div class="card border-secondary p-2">
      <h6 class="card-title">{{ ADMIN_EMOJIS.SessionSplitScreen }} Split-screen view</h5>
      <p>
        {% if splitscreen_mode_on %}
          <a target="_blank" href="{% url 'SessionSplitScreen' session.code %}">Launch</a>
        {% else %}
          <span class="text-muted" title="Only available for {{ SPLITSCREEN_UPPER_LIMIT }} participants or less">Not available 🛈︎</span>
        {% endif %}
      </p>
      </div>
      <div class="card border-secondary p-2">
      <h6 class="card-title">{{ ADMIN_EMOJIS.SessionDemoGridView }} Grid view</h5>
      <p>
        {% if grid_mode_on %}
          <a target="_blank" href="{% url 'SessionDemoGridView' session.code %}">Launch</a>
        {% else %}
          <span class="text-muted" title="Only available for {{ GRID_LOWER_LIMIT }} to {{ GRID_UPPER_LIMIT }} participants">Not available 🛈︎</span>
        {% endif %}
      </p>
      </div>
    </div>
    <br>

    <h4>Session-wide testing link</h4>
    <p>
      Open the below link in up to <strong>{{ num_participants }}</strong> browser tabs.
    </p>

    <p><a target="_blank" href="{{ anonymous_url }}">{{ anonymous_url }}</a></p>
    <br>

    <h4>Single-use links</h4>

    <p>Open each link in its own browser tab.</p>

    <table class="table">
      {% for participant_url in participant_urls %}
        <tr>
          <td><strong>P{{ forloop.counter }}</strong></td>
          <td><a href="{{ participant_url }}" class="participant-link" target="_blank">{{ participant_url }}</a></td>
        </tr>
      {% endfor %}
    </table>

  {% else %}

    <p>
      You can either use the session-wide link, persistent links,
      or single-use links.
    </p>

    <h4>Session-wide link</h4>

    <p>
        If it's not practical for you to use a Room,
        you can distribute the following link to participants.
    </p>

    <p><a target="_blank" href="{{ anonymous_url }}">{{ anonymous_url }}</a></p>

    <h4>Persistent links</h4>

    <p>
      For a real session, you should use a <a href="{% url 'Rooms' %}">room</a>.
    </p>

    <h4>Single-use links</h4>

    <p>
      Below are single-use links.
    </p>

    {% include 'otree/includes/participant_code_links_table.html' with p_urls=participant_urls %}


  {% endif %}
{% endblock %}