<div id="pages_maincontent" style="background: #FFF; ">
      
      <div class="loginform" style="margin-top: 10px">
      	<input type="text" name="buscar" value="" class="form_input required" placeholder="Buscar Usuários" style="background: transparent !important; width:85%; float:left" />
      	<img src="images/icons/blue/search.png" width="17px" style="float:left; margin-top: 12px">
      </div>
     <div class="page_single layout_fullwidth_padding">  
   

              <ul class="posts2">

              		<?php for ($i=0; $i < 15; $i++) {               			
              		?>
					<li class="swipeout">
						   <div class="swiper-wrapper">		
								  <div class="swiper-slide swipeout-content item-content">
										<div class="post_entry" onclick="mostrarDados()">
											<div class="post_thumb"><img src="images/perfil/eu.jpeg" alt="" title="" /></div>
											<div class="post_details">
											  <div class="post_category textos_list">HUGO VASCONCELOS</div>				
												<h2>Administrador</h2>
												<p class="subtitulo_list">(31) 33333-3333 / teste@hotmail.com</p>
											  </div>
											<div class="post_swipe"><img src="images/swipe_more.png" alt="" title="" /></div>
										</div>
								  </div>
								  <div class="swiper-slide swipeout-actions-right">
										<a style="width: 25%; background: #3c6cb5" href="#" class="action1"><img src="images/icons/white/edit.png" alt="" title="" /></a>
										<a style="width: 25%; background: #d4412a" href="#" class="action1 open-popup" data-popup=""><img src="images/icons/white/trash.png" alt="" title="" /></a>
										<a style="width: 25%; background: #37de56" href="#" class="action1 open-popup" data-popup=""><img src="images/icons/white/square-check.png" alt="" title="" /></a>
										<a style="width: 25%; background: #dba81a" href="#" class="action1 open-popup" data-popup=".popup-social"><img src="images/icons/white/lock.png" alt="" title="" /></a>
								  </div>
						  </div>
					</li>


				<?php } ?>


					
              </ul>
              
             <div class="shop_pagination">
          <a href="shop.html" class="prev_shop">ANTERIOR</a>
          <span class="shop_pagenr">1/10</span>
          <a href="shop-page2.html" class="next_shop">PRÓXIMA</a>
          </div>
      
			
       </div>		
      
      </div>


          <div class="fab" style="z-index: 100 !important">
			  <button class="main open-popup"  data-popup=".popup-form">
			  	+
			  </button>			  
			</div>



     		</div>
          </div>
        </div>

      </div>
    </div>







<div class="popup popup-form" id="popupForm">
	<div class="content-block" style="padding:5px !important">
		<h2 class="page_title">INSERIR DADOS</h2>      
		<div class="page_single layout_fullwidth_padding">
			<div class="contactform">
				<form id="form" method="post">

					<div class="form_row">
						<label class="labels_form">Nome</label>
						<input type="text" name="nome" value="" class="form_input" />
					</div>

					<div class="form_row">
						<label class="labels_form">Email</label>
						<input type="text" name="email" value="" class="form_input" />
					</div>

					<div class="form_row">
						<label class="labels_form">Telefone</label>
						<input type="text" name="telefone" value="" class="form_input" />
					</div>

					<div class="form_row">
						<label class="labels_form">Nível</label>
						<div class="selector_overlay">
							<select name="selectoptions" class="" style="height:40px !important;">
								<option value="" disabled selected>Selecionar Nível</option>
								<option value="Administrador">Administrador</option>
								<option value="Comum">Comum</option>
								
							</select>
						</div>
					</div>

					<div class="form_row">
						<label class="labels_form">Endereço</label>
						<input type="text" name="endereco" value="" class="form_input" />
					</div>


					<div class="form_row" align="center" onclick="imagem_perfil.click()">
						<img src="images/sem-foto-perfil.jpg" width="100px" id="target_perfil"><br>
						<img src="images/icone-arquivo.png" width="100px" style="margin-top: -12px">
					</div>

					<input type="file" name="imagem" id="imagem_perfil" style="display:none">

					<input type="button" name="btn_salvar" class="form_submit botao_salvar" id="btn_salvar" value="SALVAR" onclick="toast('Mensagem executada pelo Toast!!')"/>

				</form> 
			</div>    
		</div>          
	</div>
	<div class="close_popup_button">
		<a href="#" class="close-popup" data-popup=".popup-form"><img src="images/icons/black/menu_close.png" alt="" title="" /></a>
	</div>
</div>





    <a style="display:block" href="#" class="action1 open-popup" data-popup=".popup-mostrar" id="btn_mostrar"></a>
     <!-- Social Icons Popup -->
    <div class="popup popup-mostrar" style="width:85%; margin:20px;  background: transparent; margin-top: 100px; ">
    <div class="content-block">
     
               <h2 class="page_title_dados">NOME DO USUÁRIO</h2>   
                 
                           
                <ul class="responsive_table tabela_dados">
                     
                     <li class="table_row celula_tabela">
                        <div class="table_section" style="width:25%">Telefone</div>
                        <div class="table_section" style="width:70%">(31) 33333-3333</div>                        
                     </li>

                     <li class="table_row celula_tabela">
                        <div class="table_section" style="width:25%">Email</div>
                        <div class="table_section" style="width:70%">teste@hot....</div>                        
                     </li>

                     <li class="table_row celula_tabela">
                        <div class="table_section" style="width:25%">Ativo</div>
                        <div class="table_section" style="width:70%">Sim</div>                        
                     </li>

                     <li class="table_row celula_tabela">
                        <div class="table_section" style="width:25%">Cadastro</div>
                        <div class="table_section" style="width:70%">01/01/2010</div>                        
                     </li>

                      <li class="table_row celula_tabela">
                        <div class="table_section" style="width:25%">Endereço</div>
                        <div class="table_section" style="width:70%">Rua X Número Bairro X</div>                        
                     </li>
                   
                </ul>

                <div class="form_row celula_tabela" align="center" style="margin-top: -10px">
						<img src="images/sem-foto-perfil.jpg" width="100px" id=""><br>
				</div>
           
     
      <div class="close_popup_button"><a href="#" class="close-popup" data-popup=".popup-mostrar"><img style="margin-top: 10px" src="images/icons/white/menu_close.png" alt="" title="" width="25px"/></a></div>
    </div>
    </div>




<script type="text/javascript">
	function mostrarDados(){
		$('#btn_mostrar').click();
	}

	function toast(mensagem){
		Toastify({
		  text: mensagem,
		  duration: 3000,
		  destination: "https://github.com/apvarun/toastify-js",
		  newWindow: true,
		  close: true,
		  gravity: "top", // `top` or `bottom`
		  position: "center", // `left`, `center` or `right`
		  stopOnFocus: true, // Prevents dismissing of toast on hover
		  style: {
		    background: "#24c76a",
		  },
		  onClick: function(){} // Callback after click
		}).showToast();
	}
</script>

