<p id="notice"><%= notice %></p>
<h1>Listing Products</h1>
<div class="container">
  <div class="row">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Description</th>
          <th colspan="3"></th>
        </tr>
      </thead>
      <tbody>
        <% @products.each do |product| %>
          <tr>
            <td><%= product.name %></td>
            <td><%= product.description %></td>
            <td><%= link_to 'Show', product %></td>
            <td><%= link_to 'Edit', edit_product_path(product) %></td>
            <td><%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %></td>
          </tr>
        <% end %>
      </tbody>
    </table>
    <div id="no-js-form">
        <div class="col-md-12">
          <div class="col-md-4"></div>
          <div class="col-md-4 align"> <a><button class="btn btn-success my_button" id="align" > <%= link_to 'New Product', new_product_path %></button></a></div>
        </div>
      </div>
    </div>
  </div>
      <div id="yes-js-form">
        <div class="container">
          <div class="row">
             <div class="col-md-12">
                <div class="col-md-4"></div>
                <div class="col-md-4 yes-js-button"> <a><button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal"> New Product
              </button></a></div>
             </div>
         </div>
        </div>
      </div>
          <!-- Modal -->
        <div class="my_modal">
          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title" id="myModalLabel">Add Product</h4>
                </div>
                <div class="modal-body">



                    <h1>New Product</h1>
                    <%= render 'form' %>




                </div>
              </div>
            </div>
          </div>
<script type="text/javascript">
  document.getElementById("yes-js-form").style.display='block';
  document.getElementById("no-js-form").style.display='none';
</script>