{% extends base_template %}

{% block header %}
<link rel="stylesheet" href="{{ url_for('matrix_iframe.static', filename='matrix_iframe/matrix-chat.css') }}">
{% endblock %}

{% block body %}
<div id="matrix-chat-root"
     data-matrix-server="{{ matrix_server }}"
     data-matrix-room="{{ matrix_room_alias }}">
  <div id="matrix-chat-status" class="matrix-status"></div>
  <div id="matrix-messages" class="matrix-messages"></div>
  <div class="matrix-input-bar">
    <input type="text" id="matrix-input" class="matrix-input" placeholder="Send a message…" autocomplete="off">
    <button id="matrix-send" class="matrix-send-btn">Send</button>
  </div>
</div>
<script src="{{ url_for('matrix_iframe.static', filename='matrix_iframe/matrix-chat.js') }}"></script>
{% endblock %}