<?xml version="1.0" encoding="UTF-8"?>
<!-- Copyright 2026, Jiri Eischmann <jiri@eischmann.cz> and the meshy contributors -->
<!-- SPDX-License-Identifier: GPL-3.0-or-later -->
<interface>
  <requires lib="gtk" version="4.0"/>
  <requires lib="libadwaita" version="1.0"/>

  <template class="MeshyChannelChatWidget" parent="GtkBox">
    <property name="orientation">vertical</property>

    <child>
      <object class="GtkStack" id="stack">
        <property name="vexpand">true</property>

        <!-- Placeholder -->
        <child>
          <object class="GtkStackPage">
            <property name="name">placeholder</property>
            <property name="child">
              <object class="AdwStatusPage">
                <property name="icon-name">system-users-symbolic</property>
                <property name="title" translatable="yes">Select a Channel</property>
                <property name="description" translatable="yes">Choose a channel from the list</property>
              </object>
            </property>
          </object>
        </child>

        <!-- Chat -->
        <child>
          <object class="GtkStackPage">
            <property name="name">chat</property>
            <property name="child">
              <object class="GtkBox">
                <property name="orientation">vertical</property>

                <!-- Messages area with overlay -->
                <child>
                  <object class="GtkOverlay">
                    <property name="child">
                      <object class="GtkScrolledWindow" id="chat_scroll">
                        <property name="vexpand">true</property>
                        <property name="child">
                          <object class="GtkListView" id="list_view">
                            <property name="single-click-activate">false</property>
                            <style>
                              <class name="background"/>
                            </style>
                          </object>
                        </property>
                      </object>
                    </property>

                    <!-- Scroll-down button -->
                    <child type="overlay">
                      <object class="GtkRevealer" id="scroll_down_revealer">
                        <property name="transition-type">crossfade</property>
                        <property name="valign">end</property>
                        <property name="halign">end</property>
                        <property name="margin-end">24</property>
                        <property name="margin-bottom">24</property>
                        <property name="reveal-child">false</property>
                        <property name="child">
                          <object class="GtkButton">
                            <property name="icon-name">go-down-symbolic</property>
                            <style>
                              <class name="osd"/>
                              <class name="circular"/>
                            </style>
                          </object>
                        </property>
                      </object>
                    </child>

                    <!-- Unread button -->
                    <child type="overlay">
                      <object class="GtkRevealer" id="unread_btn_revealer">
                        <property name="transition-type">crossfade</property>
                        <property name="valign">start</property>
                        <property name="halign">center</property>
                        <property name="margin-top">8</property>
                        <property name="reveal-child">false</property>
                        <property name="child">
                          <object class="GtkButton">
                            <property name="label" translatable="yes">&#x2191; New Messages</property>
                            <style>
                              <class name="osd"/>
                              <class name="pill"/>
                            </style>
                          </object>
                        </property>
                      </object>
                    </child>

                  </object>
                </child>

                <!-- Input area -->
                <child>
                  <object class="GtkBox">
                    <property name="orientation">vertical</property>
                    <property name="margin-start">6</property>
                    <property name="margin-end">6</property>
                    <property name="margin-top">2</property>
                    <property name="margin-bottom">8</property>

                    <child>
                      <object class="GtkLabel" id="char_label">
                        <property name="label"></property>
                        <property name="halign">end</property>
                        <property name="margin-end">46</property>
                        <style>
                          <class name="dim-label"/>
                          <class name="caption"/>
                        </style>
                      </object>
                    </child>

                    <child>
                      <object class="GtkBox">
                        <property name="spacing">6</property>

                        <child>
                          <object class="GtkButton" id="emoji_btn">
                            <property name="icon-name">face-smile-symbolic</property>
                            <style>
                              <class name="flat"/>
                            </style>
                          </object>
                        </child>

                        <child>
                          <object class="GtkEntry" id="text_entry">
                            <property name="placeholder-text" translatable="yes">Message channel...</property>
                            <property name="hexpand">true</property>
                          </object>
                        </child>

                        <child>
                          <object class="GtkButton" id="send_btn">
                            <property name="icon-name">mail-send-symbolic</property>
                            <style>
                              <class name="suggested-action"/>
                            </style>
                          </object>
                        </child>

                      </object>
                    </child>

                  </object>
                </child>

              </object>
            </property>
          </object>
        </child>

      </object>
    </child>

  </template>
</interface>
