<% i18n_scope_create_edit_project = 'project._create_edit_project' %>

<header class="main-header">
  <%= link_to t('client.back_to_client_directory'),  admin_clients_path, class: 'btn-back' %>
  <article class="client-info-message hide" data-suspended="<%= t('messages.client_suspended', re_activate_link: link_to(t('cards.reactivate'), "#", class: "re-activate-client"), client_name: @client.name ) %>" data-closed="<%= t('messages.client_closed')%>" data-active="<%= t('messages.client_active', client_name: @client.name )%>"></article>
</header>
<aside id="client-sidebar">
  <%= render @client, hide_menu: false, card_state: 'selected', select_link_remote: false, extra_class: 'arrow' %>
  <header>
    <h2 class="text-section-heading"><%= t('client.aside_header') %></h2>
    <a href="<%= new_admin_client_project_path(@client) %>" id="btn-new-project" data-spinner="true" data-spinner-color="#777">
      <i></i><%= t('client.add_project') %>
    </a>
    <section class="filter-options">
      <div id="project-list-filter" class="btn-group btn-group-justified" data-toggle="buttons-radio">
        <div class="btn-group">
          <button type="button" class="btn btn-active active"><%= t 'common.active' %><span class="active-count">(0)</span></button>
        </div>
        <div class="btn-group">
          <button type="button" class="btn btn-suspended"><%= t 'common.suspended' %><span class="suspended-count">(0)</span></button>
        </div>
        <div class="btn-group">
          <button type="button" class="btn btn-closed"><%= t 'common.closed' %><span class="closed-count">(0)</span></button>
        </div>
      </div>
      <input class="search filter" id="search-project" placeholder="<%= t 'client.project_search_box' %>" type="text">
    </section>
  </header>
  <section class="projects-container">
    <article id="active-cards" class="card-group prevent-auto-hide">
      <%= render @client.projects, extra_class: 'arrow' %>
      <%= render "j_platform/templates/card_dummy", card_type: "project-card", extra_class: 'list-card', card_content: t('client.create_new_project')%>
    </article>
    <article id="suspended-cards" class="card-group hide prevent-auto-hide">
      <article class="no-item-message">
        <i class='info svg-fill'></i>
        <%= t('messages.no_item_message', status: t('common.suspended'), type: t('common.project_s') ) %>
      </article>
    </article>
    <article id="closed-cards" class="card-group hide prevent-auto-hide">
      <article class="no-item-message">
        <i class='info svg-fill'></i>
        <%= t('messages.no_item_message', status: t('common.closed'), type: t('common.project_s') ) %>
      </article>
    </article>
    <article class="no-result-message">
      <i class='svg-fill'></i>
      <span><%= t('messages.sorry') %> </span><%= t('messages.no_result') %>
    </article>
  </section>
</aside>
<%= render "client_tabs" %>
<div id="fb-root"><%# TODO: hidden classes? %>
  <script>
    window.fbAsyncInit = function() {
      // init the FB JS SDK
      FB.init({
        appId      : <%= FACEBOOK_APP_ID %>,
        channelUrl : '/channel.html',
        status     : true,
        xfbml      : true,
        cookie     : true
      });

      // Additional initialization code such as adding Event Listeners goes here
    };

    // Load the SDK asynchronously
    (function(d, s, id){
       var js, fjs = d.getElementsByTagName(s)[0];
       if (d.getElementById(id)) {return;}
       js = d.createElement(s); js.id = id;
       js.src = "//connect.facebook.net/en_US/all.js";
       fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));
  </script>
</div>