<% if flash[:settings_notice].present? %>
  <div class="crayons-banner">
    <%= flash[:settings_notice] %>
  </div>
<% elsif flash[:error].present? %>
  <div class="crayons-banner crayons-banner--error">
    <%= flash[:error] %>
  </div>
<% end %>

<div class="p-4">
  <header class="mb-4 grid gap-2">
    <h2><%= @channel.channel_name %></h2>
    <p><%= @channel.description %></p>
    <% if @membership.role == "mod" %>
      <p class="fw-bold">You are a channel mod</p>
    <% end %>
  </header>

  <div class="p-4 grid gap-2 crayons-card mb-4">
    <h3 class="mb-2">Members</h3>
    <% @channel.active_memberships.includes(:user).each do |active_membership| %>
      <div class="flex items-center">
        <a href="<%= active_membership.user.path %>" class="flex items-center">
          <span class="crayons-avatar crayons-avatar--l mr-2">
            <img src="<%= ProfileImage.new(active_membership.user).get(width: 90) %>" class="crayons-avatar__image" />
          </span>
          <%= active_membership.user.name %>
        </a>
        <% if @membership.role == "mod" && active_membership.role != "mod" %>
          <%= form_tag "/chat_channel_memberships/remove_membership" do %>
            <%= hidden_field_tag(:chat_channel_id, @channel.id) %>
            <%= hidden_field_tag(:membership_id, active_membership.id) %>
            <button class="crayons-btn crayons-btn--icon-rounded crayons-btn--ghost" type="submit">×</button>
          <% end %>
        <% end %>
      </div>
    <% end %>
  </div>

  <% if @membership.role == "mod" %>
    <div class="crayons-card p-4 grid gap-2 mb-4">
      <h3>Pending Invitations</h3>
      <% @channel.pending_memberships.includes(:user).each do |pending_membership| %>
        <div class="flex items-center">
          <a href="<%= pending_membership.user.path %>">
            <span class="crayons-avatar crayons-avatar--l mr-2">
              <img src="<%= ProfileImage.new(pending_membership.user).get(width: 90) %>" class="crayons-avatar__image" />
            </span>
            <%= pending_membership.user.name %>
          </a>
          <%= form_tag "/chat_channel_memberships/remove_membership" do %>
            <%= hidden_field_tag(:status, "pending") %>
            <%= hidden_field_tag(:chat_channel_id, @channel.id) %>
            <%= hidden_field_tag(:membership_id, pending_membership.id) %>
            <button class="crayons-btn crayons-btn--icon-rounded crayons-btn--ghost" type="submit">×</button>
          <% end %>
        </div>
      <% end %>
      <% if @channel.private_org_channel? %>
        <p><em>Invite new members by <a href="/settings/organization">inviting them to this organization.</a></em></p>
      <% else %>
        <%= form_for ChatChannelMembership.new, html: { class: "grid gap-4" } do |f| %>
          <div class="crayons-field">
            <%= f.hidden_field :chat_channel_id, value: @channel.id %>
            <%= f.label "Usernames to Invite", class: "crayons-field__label" %>
            <%= f.text_field :invitation_usernames, placeholder: "Comma separated", class: "crayons-textfield" %>
          </div>
          <div><button type="submit" class="crayons-btn">Submit</button></div>
        <% end %>

        <h3>Channel Settings</h3>
        <%= form_for(@channel) do |f| %>
          <div class="crayons-field">
            <%= f.label :description, class: "crayons-field__label" %>
            <%= f.text_area :description, class: "crayons-textfield" %>
          </div>
          <div>
            <button type="submit" class="crayons-btn">Submit</button>
          </div>
        <% end %>
      <% end %>

    </div>
  <% end %>

  <div class="crayons-card p-4 grid gap-2 mb-4">
    <h3>Personal Settings</h3>
    <h4>Notifications</h4>
    <%= form_for @membership, html: { class: "mb-4 grid gap-2" } do |f| %>
      <div class="crayons-field crayons-field--checkbox">
        <%= f.check_box :show_global_badge_notification, class: "crayons-checkbox" %>
        <%= f.label :show_global_badge_notification, "Receive Notifications for New Messages", class: "crayons-field__label" %>
      </div>
      <div><button class="crayons-btn" type="submit">Submit</button></div>
    <% end %>
  </div>

  <div class="crayons-card grid gap-2 p-4">
    <% if @membership.role == "mod" %>
      <p>Questions about Connect Channel moderation? Contact <%= email_link %></p>
    <% else %>
      <h3>Danger Zone</h3>
      <%= form_for(@membership, html: { method: :delete, onsubmit: "return confirm('Are you absolutely sure you want to leave this channel? This action is permanent.');" }) do |f| %>
        <div><button class="crayons-btn crayons-btn--danger" type="submit">Leave Channel</button></div>
      <% end %>
    <% end %>
  </div>
</div>
