<div class="new-card card-template uk-panel uk-panel-box uk-panel-box-secondary uk-padding uk-flex">
    <%= form_for @card, Routes.card_path(@conn, :create), fn f -> %>
    <%= text_input f, :title, class: "card-title uk-text-xlarge uk-margin-large-bottom" %>
    <%= error_tag f, :title %>
    <div class="card-picture uk-flex uk-flex-center uk-inline">
        <%= text_input f, :picture, class: "uk-hidden" %>
        <img class="card-picture" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjAwcHgiIGhlaWdodD0iNDAwcHgiIHZpZXdCb3g9IjAgMCA2MDAgNDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2MDAgNDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IGZpbGw9IiNGNUY1RjUiIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIi8+DQo8ZyBvcGFjaXR5PSIwLjciPg0KCTxwYXRoIGZpbGw9IiNEOEQ4RDgiIGQ9Ik0yMjguMTg0LDE0My41djExM2gxNDMuNjMydi0xMTNIMjI4LjE4NHogTTM2MC4yNDQsMjQ0LjI0N0gyNDAuNDM3di04OC40OTRoMTE5LjgwOEwzNjAuMjQ0LDI0NC4yNDcNCgkJTDM2MC4yNDQsMjQ0LjI0N3oiLz4NCgk8cG9seWdvbiBmaWxsPSIjRDhEOEQ4IiBwb2ludHM9IjI0Ni44ODEsMjM0LjcxNyAyNzEuNTcyLDIwOC43NjQgMjgwLjgyNCwyMTIuNzY4IDMxMC4wMTYsMTgxLjY4OCAzMjEuNTA1LDE5NS40MzQgDQoJCTMyNi42ODksMTkyLjMwMyAzNTQuNzQ2LDIzNC43MTcgCSIvPg0KCTxjaXJjbGUgZmlsbD0iI0Q4RDhEOCIgY3g9IjI3NS40MDUiIGN5PSIxNzguMjU3IiByPSIxMC43ODciLz4NCjwvZz4NCjwvc3ZnPg0K" />
        <div class="image-tools uk-flex uk-overlay-default uk-position-center">
            <a class="image-tool" id="imageSearch" uk-icon="icon: search; ratio:2" uk-tooltip="title: Search" uk-toggle="target: #imageModal"></a>
            <!--a class="image-tool" id="imageInsta" uk-icon="icon: instagram; ratio: 2" uk-tooltip="Instagram"></a>
		<div class="uploader" uk-form-custom style="margin:1em;"  uk-tooltip="Upload">
		  <input type="file">
		  <a style="margin:0px;" class="image-tool" id="imageUpload" uk-icon="icon: upload; ratio: 2"></a></div>
		  <a class="image-tool" id="imageDraw" uk-icon="icon: pencil; ratio: 2" uk-tooltip="Draw"></a-->
        </div>

    </div>
    <div class="card-content uk-flex uk-flex-center">
        <%= textarea f, :description, class: "card-content-box"%>
        <%= error_tag f, :description %>
    </div>
<div class="controls uk-margin-top">
    <div class="uk-flex uk-flex-center">
        <ul class="uk-subnav uk-subnav-pill" style="margin-bottom:0px;">
            <li><button id="newCard" class="uk-subnav-pill" href="#">New</a></li>
            <li>
                <%= submit "Submit", class: "uk-active uk-subnav-pill", id: "submitCard" %>
            </li>
        </ul>
    </div>
</div>
<%end %>
</div>

<div id="imageModal" uk-modal>
      <div class="uk-modal-dialog uk-modal-body">
	<form class='uk-search uk-search-large' id="imageModalContent">
	  <a href="#" id="giphySearchButton" class="uk-search-icon-flip" uk-search-icon></a>
	  <input id="giphySearch" class="uk-search-input" placeholder="Search GIPHY..." />
	</form>
	<div id="giphySearchResults" class="uk-flex uk-flex-center uk-flex-wrap">

	</div>
	<button class="uk-modal-close-default" type="button" uk-close></button>
      </div>
    </div>
