<% provide(:head_title, t("users.settings.teams.head_title")) %>
<% provide(:container_class, "no-second-nav-container") %>

<% content_for :head do %>
  <meta id="cache-directive" name="turbolinks-cache-control" content="no-cache">
<% end %>

<div data-hook="team-beginning"></div>

<div class="content-pane flexible team-settings-pane with-grey-background">
  <%= render partial: 'header' %>

  <!-- HEADER -->
  <div class="team-metadata">

    <div class="created-at flex items-center gap-2">
      <span class="sn-icon sn-icon-calendar"></span>
      <span class="hidden-xs hidden-sm"><%= t("users.settings.teams.edit.header_created_at") %></span>
      <b><%= l(@team.created_at, format: :full_date) %></b>
    </div>

    <div class="created-by flex items-center gap-2">
      <span class="sn-icon sn-icon-users"></span>
      <span class="hidden-xs hidden-sm"><%= t("users.settings.teams.edit.header_created_by") %></span>
      <b>
        <%= t('users.settings.teams.edit.header_created_by_name_email', name: @team.created_by.full_name, email: @team.created_by.email) if @team.created_by %>
      </b>
    </div>

    <div class="space-usage flex items-center gap-2">
      <span class="sn-icon sn-icon-cloud-storage"></span>
      <span class="hidden-xs hidden-sm"><%= t("users.settings.teams.edit.header_space_taken") %></span>
      <b data-hook="team-space-taken"><%= "#{number_to_human_size(@team.storage_used)}" %></b>
    </div>
  </div>

  <div class="flex items-center py-4 leading-6 gap-6">
    <span><%= t("users.settings.teams.show.tasks_share.enable_label") %></span>
    <span class="sci-toggle-checkbox-container">
      <%= check_box_tag 'select_team_share_permission', 0, @team.shareable_links_enabled?, { class: 'sci-toggle-checkbox team-share-permission',
                                                                                          data: { disable_url: disable_tasks_sharing_modal_team_path(),
                                                                                                  enable_url: shared_tasks_toggle_team_path()
                                                                                                },
                                                                                          disabled: !can_manage_team?(@team) } %>
      <span class="sci-toggle-checkbox-label"></span>
    </span>
  </div>

  <div class="team-description inline-editing-container">
    <% if can_manage_team?(@team) %>
      <div
        class="inline-init-handler"
        data-field-to-update="description"
        data-params-group="team"
        data-path-to-update="<%= update_team_path(@team, format: :json) %>"
        data-original-name="<%= @team.description %>"
      >
        <div class="view-mode bg-white !px-4" data-placeholder="<%= t("users.settings.teams.show.enter_description") %>"><%= @team.description %></div>
        <textarea placeholder="<%= t("users.settings.teams.show.enter_description") %>" class="hidden input-field smart-text-area !px-4" type="text" value="<%= @team.description %>" disabled><%= @team.description %></textarea>
        <div class="button-container">
          <span class="cancel-button inline-field-button"><i class="sn-icon sn-icon-close"></i></span>
          <span class="save-button inline-field-button"><i class="sn-icon sn-icon-check"></i></span>
        </div>
      </div>
    <% else %>
      <span class="view-mode disable-select"><%= @team.description.blank? ? t('users.settings.teams.edit.header_no_description') : @team.description %></span>
    <% end %>
  </div>
  <!-- End of HEADER -->
  <div data-hook="team-the-end"></div>
</div>

<%= render partial: 'users/settings/teams/description_modal' %>
<%= render partial: 'users/settings/teams/destroy_modal', locals: { team: @team } %>
<%= render partial: 'users/settings/user_teams/destroy_user_team_modal' %>
<%= stylesheet_link_tag 'datatables' %>
<%= javascript_include_tag 'users/settings/teams/show' %>
<span data-hook="team-bottom"></span>
