{{ header }}
<div id="account-chat" class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  <div class="row">
    {{ column_left }}
    {% if column_left and column_right %}{% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}{% set class = 'col-sm-9' %}
    {% else %}{% set class = 'col-sm-12' %}{% endif %}
    <div id="content" class="{{ class }}">
      {{ content_top }}
      <h2><i class="fa fa-comments"></i> {{ heading_title }}</h2>

      <div style="margin-bottom:15px;">
        <button class="btn btn-primary" data-toggle="modal" data-target="#modal-new-chat">
          <i class="fa fa-plus"></i> Start New Chat
        </button>
      </div>

      {% if conversations %}
      <div class="table-responsive">
        <table class="table table-bordered table-hover">
          <thead>
            <tr>
              <th>Reason</th>
              <th>Assigned To</th>
              <th>Status</th>
              <th>Unread</th>
              <th>Last Message</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for conv in conversations %}
            <tr>
              <td>{{ conv.subject }}</td>
              <td>
                {% if conv.admin_firstname %}
                  {{ conv.admin_firstname }} {{ conv.admin_lastname }}
                {% else %}
                  <span class="text-muted">Unassigned</span>
                {% endif %}
              </td>
              <td>
                {% if conv.status == 'open' %}
                  <span class="label label-success">Open</span>
                {% elseif conv.status == 'hold' %}
                  <span class="label label-warning" title="{{ conv.hold_reason }}">On Hold</span>
                  {% if conv.hold_reason %}<br><small class="text-muted">{{ conv.hold_reason }}</small>{% endif %}
                {% elseif conv.status == 'shared' %}
                  <span class="label label-info">Shared</span>
                {% else %}
                  <span class="label label-default">Closed</span>
                {% endif %}
              </td>
              <td>
                {% if conv.unread > 0 %}
                  <span class="badge" style="background:#e74c3c;">{{ conv.unread }}</span>
                {% else %}—{% endif %}
              </td>
              <td style="max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
                {{ conv.last_message }}
              </td>
              <td>
                <a href="{{ open_url }}?conversation_id={{ conv.conversation_id }}" class="btn btn-sm btn-primary">
                  <i class="fa fa-comments"></i> Open
                </a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <div class="alert alert-info">No chats yet. Start a new chat to contact support.</div>
      {% endif %}

      {{ content_bottom }}
    </div>
    {{ column_right }}
  </div>
</div>

<!-- New Chat Modal -->
<div class="modal fade" id="modal-new-chat" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Start New Chat</h4>
      </div>
      <form action="{{ create_url }}" method="post">
        <div class="modal-body">
          <div class="form-group">
            <label>Reason for Chat <span class="text-danger">*</span></label>
            {% if chat_reasons %}
            <select name="reason_id" class="form-control" required>
              <option value="">— Select a reason —</option>
              {% for reason in chat_reasons %}
              <option value="{{ reason.reason_id }}">{{ reason.name }}</option>
              {% endfor %}
            </select>
            {% else %}
            <p class="text-muted">No reasons available. Please contact support directly.</p>
            {% endif %}
          </div>
          <div class="form-group">
            <label>Message <span class="text-danger">*</span></label>
            <textarea name="message" class="form-control" rows="4" placeholder="Describe your issue..." required></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Send</button>
        </div>
      </form>
    </div>
  </div>
</div>

{{ footer }}