<script type="text/javascript" src="https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere.js"></script>
<script>
  intuit.ipp.anywhere.setup({menuProxy: '/path/to/blue-dot', grantUrl: '<%= qbo_authenticate_path %>'});
</script>

<div class="box tabular">
  <p>
    <label><%= t(:label_client_id) %></label>
    <%= text_field_tag 'settings[oauth_consumer_key]', settings[:oauth_consumer_key], size: 50 %>
  </p>

  <p>
    <label><%= t(:label_client_secret) %></label>
    <%= password_field_tag 'settings[oauth_consumer_secret]', settings[:oauth_consumer_secret], size: 50 %>
  </p>
  
  <p>
    <label><%= t(:label_webhook_token) %></label>
    <%= text_field_tag 'settings[webhook_token]', settings[:webhook_token], size: 50 %>
  </p>

  <p>
    <label><%= t(:label_sandbox) %></label>
    <%= check_box_tag 'settings[sandbox]', 1, settings[:sandbox] %>
  </p>

  <hr />

  <p>
    <label><%= t(:label_oauth_expires) %></label>
    <span class="icon <%= Qbo.oauth2_access_token_expires_at&.future? ? 'icon-ok' : 'icon-warning' %>">
      <%= Qbo.oauth2_access_token_expires_at || 'N/A' %>
    </span>
  </p>

  <p>
    <label><%= t(:label_customer_count) %></label>
    <%= Customer.count %> 
    <em style="color: #777; font-size: 0.9em; margin-left: 8px;">(@ <%= Customer.last_sync %>)</em>
  </p>

  <p>
    <label><%= t(:label_employee_count) %></label>
    <%= Employee.count %> 
    <em style="color: #777; font-size: 0.9em; margin-left: 8px;">(@ <%= Employee.last_sync %>)</em>
  </p>

  <p>
    <label><%= t(:label_invoice_count) %></label>
    <%= Invoice.count %> 
    <em style="color: #777; font-size: 0.9em; margin-left: 8px;">(@ <%= Item.last_sync %>)</em>
  </p>

  <p>
    <label><%= t(:label_estimate_count) %></label>
    <%= Estimate.count %> 
    <em style="color: #777; font-size: 0.9em; margin-left: 8px;">(@ <%= Account.last_sync %>)</em>
  </p>

  <p>
    <label><%= t(:label_last_sync) %> (QBO)</label>
    <%= Qbo.exists? ? Qbo.last_sync : 'Never synced' %>
  </p>
</div>

<fieldset class="box">
  <legend>Management & Synchronization</legend>
  
  <div style="margin-bottom: 20px;">
    <ipp:connectToIntuit></ipp:connectToIntuit>
  </div>

  <div style="margin-bottom: 15px;">
    <%= link_to t(:label_sync_now_customers), sync_customers_path, class: 'button icon icon-reload' %>
    <%= link_to t(:label_sync_now_employees), employees_sync_path, class: 'button icon icon-reload' %>
    <%= link_to t(:label_sync_now_invoices), invoices_sync_path, class: 'button icon icon-reload' %>
    <%= link_to t(:label_sync_now_estimate), estimates_sync_path, class: 'button icon icon-reload' %>
  </div>
</fieldset>