<%= title 'Easy Iconset' %>
<section id="iconset">
<% @icons.each do |icon| %>
  <div class="floating">
    <div style="width: 125px; border: 1px solid #f0f0f0" class="text-center">
      <i class="icon icon-<%= icon %>" style="font-size: 24pt"></i><br>
      <%= icon %>
    </div>
  </div>
<% end %>
</section>

<div id="iconset_modal_detail" style="display:none">
  <div class="big-icon  text-center" onclick="hideModal('#iconset_modal_detail')">
  </div>
  <br>
  <pre class="text-center" style="width: 200px; margin: auto">

  </pre>

</div>
<style type="text/css">
  .text-center:hover {
    font-weight: bolder;
    cursor: pointer;
  }
</style>
<script type="text/javascript">
  $(document).on("click", "#iconset .text-center", function(event) {
    var modal = document.getElementById("iconset_modal_detail");
    var bigIcon = modal.getElementsByClassName("big-icon")[0];
    var icon = event.target.children[0];
    bigIcon.innerHTML = "<i class=\""+icon.classList.toString()+"\" style=\"font-size: 156pt\"></i>";
    modal.getElementsByTagName("pre")[0].innerHTML = icon.classList.toString();
    showModal(modal.id);
    bigIcon.onclick = function() {$(modal).dialog("close")}
  })
</script>
