{% extends "layout/basic.html" %}
{% import "components/ui/v1.html" as ui_v1 %}
{% block content %}
<main class="bp-chat-page bp-chat-page--create ui-page ui-page--padded ui-page--compact-type ui-stack">
  {% call ui_v1.page_header('创建群聊') %}{% endcall %}
  <div data-bp-chat-create-mount>
    <form class="ui-panel bp-chat-page__create-form" data-chat-create-form>
      <div class="ui-panel__body ui-stack">
        <label class="ui-field">
          <span class="ui-field__label">群名称</span>
          <input class="textbox ui-field__control" name="name" maxlength="80" required>
        </label>
        <label class="ui-field">
          <span class="ui-field__label">群类型</span>
          <select class="select ui-field__control" name="courseId" data-chat-courses>
            <option value="">普通群</option>
          </select>
        </label>
        <div data-chat-create-picker></div>
        <div class="ui-alert ui-alert--danger" role="alert" data-chat-create-error hidden></div>
        <p class="ui-meta" role="status" data-chat-create-state></p>
      </div>
      <footer class="ui-panel__footer">
        <div class="ui-actions">
          <a class="button rounded bp-chat-page__create-action" href="{{ UiContext.chat.pageUrl }}" data-chat-create-cancel>返回群聊</a>
          <button class="button primary rounded bp-chat-page__create-action" type="submit" data-chat-create-submit disabled>创建</button>
        </div>
      </footer>
    </form>
    <noscript>请启用 JavaScript。</noscript>
  </div>
</main>
{% endblock %}