<div class='container'>
  <div class='row'>
    <div class='col-md-12'>
      <div class="page-header">
        <h2>
          Your Credentials
        </h2>
      </div>

      <blockquote>
        Credentials are used to store values used by many Agents. Examples might include "twitter_consumer_secret",
        "user_full_name", or "user_birthday".
      </blockquote>

      <table class='table table-striped'>
        <tr>
          <th><%= sortable_column 'credential_name', 'asc', name: 'Name'  %></th>
          <th><%= sortable_column 'credential_value', 'asc', name: 'Value' %></th>
        </tr>

        <% @user_credentials.each do |user_credential| %>
          <tr>
            <td><%= user_credential.credential_name %></td>
            <td>
              <%= truncate user_credential.credential_value %>
              <div class="btn-group btn-group-xs" style="float: right">
                <%= link_to 'Edit', edit_user_credential_path(user_credential), class: "btn btn-default" %>
                <%= link_to 'Delete', user_credential_path(user_credential), method: :delete, data: {confirm: 'Are you sure?'}, class: "btn btn-default" %>
              </div>
            </td>
          </tr>
        <% end %>
      </table>

      <%= paginate @user_credentials, :theme => 'twitter-bootstrap-3' %>

      <br/>

      <div class="btn-group">
        <%= link_to new_user_credential_path, class: "btn btn-default" do %><span class="glyphicon glyphicon-plus"></span> New Credential<% end %>
        <%= link_to user_credentials_path(format: :json), class: "btn btn-default" do %><span class="glyphicon glyphicon-cloud-download"></span> Download Credentials<% end %>
        <%= link_to '#', data: { toggle: 'modal', target: '#credentials-upload' }, class: "btn btn-default credentials-upload-button" do %><span class="glyphicon glyphicon-upload"></span> Upload Credentials<% end %>
      </div>

      <div id="credentials-upload" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog">
          <div class="modal-content">
            <%= form_tag import_user_credentials_path, multipart: true do %>
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Upload Credentials</h4>
              </div>
              <div class="modal-body">
                <p>Upload a credentials file that you have previously exported from a Huginn instance.</p>
                <%= file_field_tag :file, class: 'form-control' %>
              </div>
              <div class="modal-footer">
                <%= button_tag 'Cancel', class: 'btn btn-default', 'data-dismiss' => 'modal' %>
                <%= submit_tag 'Upload', class: 'btn btn-primary' %>
              </div>
            <% end %>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>