<div class="uk-text-center uk-container uk-flex uk-flex-center uk-margin-top uk-flex-column">
<h1>All Cards</h1>
<hr/>

<div class="uk-flex  uk-flex-wrap uk-flex-center">
    <input type="hidden" value="<%= Phoenix.Controller.get_csrf_token() %>" name="_csrf_token"/>

<%= if Enum.empty? @cards do %>
<div class="create">
            There are no cards.<br/>
            What are you waiting for?
            <a href="/create">
                Create a card!
            </a>
        </div>
<% end %>

<%= for card <- @cards do %>

<div class="uk-flex uk-text-center" id="card-<%=card.id%>">
  <div class="card-preview uk-panel uk-panel-box uk-panel-box-secondary uk-padding uk-flex">
    <h3 class="card-title uk-text-xlarge uk-margin-large-bottom"><%= card.title %> </h3>
    <div class="card-picture uk-flex uk-flex-center">
      <img class="card-picture" src="<%=card.picture%>" />
    </div>
    <div class="card-content uk-flex uk-flex-center">
      <%=card.description          %>
    </div>
  </div>
<a class="delete-tool" uk-icon="icon: trash; ratio:1" uk-tooltip="title: Delete" href="javascript:deleteCard(<%=card.id %>)"></a>
</div>


<% end %>


</div>
     <div class="create uk-margin-top">

   <hr />
               What are you waiting for?
            <a href="/create">
                Create more cards!
            </a>
        </div>
