<div class="card shadow-sm">
  <%= card_header text: @account.name, close_action_path: [:admin, :accounts] %>
  <div class="card-body">
    <%= card_field_set_tag "Account Details" do %>
      <dl class="row">
        <dt class="col-sm-2">Plan</dt>
        <dd class="col-sm-10"><%= @account.plan_name %></dd>
        <dt class="col-sm-2">Users</dt>
        <dd class="col-sm-10"><%= @account.users.size %></dd>
        <dt class="col-sm-2">Created at</dt>
        <dd class="col-sm-10"><%= time_ago_in_words(@account.created_at) %> ago</dd>
      </dl>
    <% end %>

    <%= card_field_set_tag "Videos" do %>
      <%= bootstrap_form_with url: [:admin, @account], method: :get, remote: true, layout: :inline, id: "search" do |form| %>
        <%= form.search_field :query, hide_label: true, placeholder: t("shared.search"), class: "rounded-pill-right", value: params[:query], prepend: form.button(fa_icon("search"), id: "search-button", class: "btn btn-light border rounded-pill-left") %>
      <% end%>
      <div class="table-responsive-sm">
        <table class="table table-striped tr-px-4 align-all-middle">
          <thead class="thead-light">
            <tr>
              <th>Project</th>
              <th>Name</th>
              <th></th>
            </tr>
          </thead>
          <tbody id="videos">
            <%= render partial: "admin/accounts/video", collection: @videos %>
          </tbody>
        </table>
      </div>
      <div id="videos_pagiantion">
        <%= will_paginate @videos %>
      </div>
    <% end %>
  </div>
</div>
