@extends('layouts.app')

@section('title', 'Home Page')

@section('content')
<main class="main-content">
  <section class="page-header">
    <div class="container">
      <h1 class="page-title">{{ __('lang.inbox') }}</h1>
    </div>
  </section>

  <section class="inbox-section">
    <div class="container">
      <div class="inbox-container">
        <div class="conversation-list">
          <div class="conversation-search">
            <div class="input-icon search-input">
              <!-- SVG unchanged -->
              <input type="text" id="conversationSearch" placeholder="{{ __('lang.search_conversations') }}">
            </div>
          </div>
          <div class="conversation-items" id="conversationList">
            <!-- Conversations will be populated here -->
          </div>
        </div>

        <div class="message-container" id="messageContainer">
          <div class="empty-state" id="emptyState">
            <div class="empty-state-icon">
              <!-- SVG unchanged -->
            </div>
            <h3 class="empty-state-title">{{ __('lang.no_conversation_selected') }}</h3>
            <p class="empty-state-description">{{ __('lang.select_conversation') }}</p>
          </div>

          <div class="chat-interface hidden" id="chatInterface">
            <div class="chat-header" id="chatHeader">
              <!-- Chat header will be populated here -->
            </div>
            <div class="message-list" id="messageList">
              <!-- Messages will be populated here -->
            </div>
            <div class="message-composer">
              <form id="messageForm" class="message-form">
                <div class="input-icon message-input">
                  <input type="text" id="messageInput" placeholder="{{ __('lang.type_a_message') }}">
                  <button type="submit" class="btn-icon send-button">                   
                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="w-5 h-5" style="color:white">
                        <line x1="22" y1="2" x2="11" y2="13"></line>
                        <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                      </svg>
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

@endsection