<div class="modal fade" id="invitation-modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <form class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Invite User</h4>
      </div>
      <div class="modal-body">
        <label for="invited-username">User to invite:</label>
        <input type="email" class="form-control" id="invited-username" placeholder="username@example.com">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button class="btn btn-primary btn-default send-invitation">Invite</button>
      </div>
    </form>
  </div>
</div>

<div class="container h-100">
  <div class="row h-100">
    {{#showConversationList}}
    <div class="col-md-4 h-100 column-container">
      <div id="conversation-list" class="column-fill">
      </div>
      <div class="align-center">
        <a class="big-icon text-gray-dark" href="#/new-chat"><i class="cursor-interactive icon ion-plus-circled"></i></a>
      </div>
    </div>
    {{/showConversationList}}
    {{#showConversationMain}}
    <div id="conversation-main" class="col-md-8 h-100 column-container">
      {{#selected}}

      <div class="column-fill post-backdrop {{^miniMode}}not-{{/miniMode}}mini-mode">
        {{#miniMode}}
        <div class="conversation-control-panel bg-primary text-white px-1 mb-1">
          <div class="float-right dropdown">
            <i class="cursor-interactive icon ion-more" data-toggle="dropdown"></i>
            <div class="dropdown-menu dropdown-menu-right">
              {{#overflowMenuItems}}
              {{#separator}}
              <div class="dropdown-divider"></div>
              {{/separator}}
              {{^separator}}
              <button class="dropdown-item {{action}}">{{label}}</button>
              {{/separator}}
              {{/overflowMenuItems}}
            </div>
          </div>
          <i class="toggle-info-mode float-right icon ion-information-circled pr-1"></i>
          {{#showConversationInfo}}
          <i class="end-info-mode icon ion-arrow-left-c" style="padding-right: 0.5rem"></i>
          {{/showConversationInfo}}
          {{^showConversationInfo}}
          <a class="text-white" style="padding-right: 0.5rem" href="#/conversations"><i class="icon ion-arrow-left-c"></i></a>
          {{/showConversationInfo}}
          <span>{{title}}{{^title}}<i class="text-muted">Untitled</i>{{/title}}</span>
        </div>
        {{/miniMode}}

        {{#showConversationInfo}}
        <div>
          <div class="float-right dropdown mr-1">
            <i class="cursor-interactive big-icon icon ion-more" data-toggle="dropdown"></i>
            <div class="dropdown-menu dropdown-menu-right">
              {{#overflowMenuItems}}
              {{^hidden}}
              {{#separator}}
              <div class="dropdown-divider"></div>
              {{/separator}}
              {{^separator}}
              <button class="dropdown-item {{action}}">{{label}}</button>
              {{/separator}}
              {{/hidden}}
              {{/overflowMenuItems}}
            </div>
          </div>
          {{#editingTitle}}
          <h2 class="mr-1">
            <form class="form-inline">
              <input type="text" autocomplete="off" class="form-control" id="conversation-title" value="{{title}}">
              <button class="form-control btn btn-primary btn-default" id="accept-conversation-title"><i class="icon ion-checkmark"></i></button>
              <button class="form-control btn btn-secondary" id="cancel-edit-conversation-title"><i class="icon ion-close"></i></button>
            </form>
          </h2>
          {{/editingTitle}}
          {{^editingTitle}}
          <form class="form-inline float-right">
            <button class="form-control btn" id="edit-conversation-title"><i class="icon ion-edit"></i></button>
          </form>
          <h2 id="title-heading">{{title}}{{^title}}<i class="text-muted">Untitled</i>{{/title}}</h2>
          {{/editingTitle}}
          <hr>

          {{#editingBlurb}}
          <div class="mr-1">
            <textarea rows="3" class="form-control" id="conversation-blurb">{{blurb}}</textarea>
            <form class="form-inline align-right pb-1">
              <button class="form-control btn btn-primary btn-default" id="accept-conversation-blurb"><i class="icon ion-checkmark"></i></button>
              <button class="form-control btn btn-secondary" id="cancel-edit-conversation-blurb"><i class="icon ion-close"></i></button>
            </form>
          </div>
          {{/editingBlurb}}
          {{^editingBlurb}}
          <div>
            <form class="form-inline float-right">
              <button class="form-control btn" id="edit-conversation-blurb"><i class="icon ion-edit"></i></button>
            </form>
            <div id="blurb" class="blurb-box">
              {{#blurb}}
              <p>{{blurb}}</p>
              {{/blurb}}
              {{^blurb}}
              <p><i class="text-muted">Set a conversation topic here</i></p>
              {{/blurb}}
            </div>
          </div>
          {{/editingBlurb}}
        </div>
        {{/showConversationInfo}}

        {{#showConversationPosts}}
        <div class="posts"></div>
        {{/showConversationPosts}}
      </div>
      {{#showConversationPosts}}
      <div id="pending-draft-items">
      </div>
      <form id="message-input-form" class="form-inline pt-1" style="display: flex;">
        <input type="text" autocomplete="off" id="message-input" class="form-control" style="flex: 1">
        <input type="file" style="display: none;" hidden id="attach-item-file">
        <button type="button" id="attach-item-button" class="form-control btn btn-secondary" style="max-width: 3em; font-size: 120%;"><i class="icon ion-paperclip"></i></button>
        <button type="submit"  id="send-message-button" class="form-control btn btn-primary btn-default" style="max-width: 3em"><i class="icon ion-paper-airplane"></i></button>
      </form>
      {{/showConversationPosts}}

      {{/selected}}

      {{^selected}}
      <p class="align-center">
        Select a conversation from the column to the left,
        or <a href="#/new-chat">create a new conversation</a>.
      </p>
      {{/selected}}
    </div>
    {{/showConversationMain}}
  </div>
</div>
{{#miniMode}}
<style>
  footer { display: none; }
  #message-input-form { margin-bottom: 1rem; }
</style>
{{/miniMode}}
