<div class="modal fade" id="stream-modal" tabindex="-1" role="dialog" aria-labelledby="link-modal-label" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">
          {{ site.data.lang[site.conference.lang].live.stream | default: "Live Stream" }}
        </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="" allowfullscreen></iframe>
        <div id="stream-placeholder" class="embed-responsive-item d-none justify-content-center align-items-center">
          <div></div>
        </div>
      </div>

      <div class="modal-footer flex-column justify-content-start d-none live-past" id="stream-info" data-time="">
        <div class="my-0 small align-self-start live-time" id="stream-info-time" data-time=""></div>
        <div class="pl-2 align-self-start" id="stream-info-color">
          <p class="mb-0">
            <a class="text-reset" href="#" id="stream-info-talk"></a>
          </p>
          <p class="font-weight-light mb-0" id="stream-info-speakers"></p>
        </div>
      </div>

      <div class="modal-footer justify-content-around">
        {%- for room in site.rooms -%}
          <a id="stream-button{{ forloop.index }}" href="#" class="btn btn-outline-primary d-none d-sm-inline {% unless room.live %}disabled{% endunless %}" role="button" data-room="{{ room.name }}">
            {{ room.name }}
          </a>
        {%- endfor %}
        <div class="form-group w-100 d-block d-sm-none">
          <select class="form-control" id="stream-select">
            {%- for room in site.rooms -%}
              <option value="{{ forloop.index }}" {% unless room.live %}disabled{% endunless %}>{{ room.name }}</option>
            {%- endfor %}
          </select>
        </div>
      </div>

    </div>
  </div>
</div>