{% extends "master-vcard.html" %} {% block body %}

{% block stylesheets %}
    {{ parent() }}  

  {% endblock %}


  <div class="site-content">
		<!-- Preloader start -->
		<div class="preloader">
			<div class="loader">
				<div class="dot"></div>
				<div class="dot"></div>
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
		</div>
		<!-- Preloader end -->
		<!-- Bg animation start -->
		<canvas></canvas>
		<!-- Bg animation end -->
		<!--Freelancer content start -->
		<section id="freelancer-main" class="ceo-content">
			<div class="freelancer-main-wrap">
				<div class="header" style="background: url({{assets}}/images/universidades/{{institucion.bg}}); background-position:center; background-repeat: no-repeat; background-size: cover; position: relative;">
					<div class="header-content">
						<div class="header-logo">
							<a href="#"><img src="{{assets}}vcard/images/logo-fimpes.jpeg" height="70" alt="logo"></a>
						</div>
						
					</div>
				</div>
				<div class="profile-content position-relative container">
					<div class="profile-sec text-center ">
						<div class="profile-img">
							<img class="oval-frame " src="{{assets}}/images/universidades/{{institucion.logo}}" height="100%" width="100%" alt="profile-img">
						</div>
						<div class="profile-name">
							<h1 class="mt-10">{{institucion.institucion}}</h1>
							<p class="mt-5">{{seccion.seccion}}</p>
							
						</div>
					</div>
				
				</div>
			
				<div class="contact-sec container mt-30">
					<div class="contact-sec-wrap">
						<div class="services-top">
							<h2>Información</h2>
							<h3 class="d-none">Hidden</h3>
						</div>
						<div class="contact-bottom-sec">



							{% for item in items %}
                                                    
                                                    {% if item.institucion == 1 %}
                                                    
													  {% if item.confidencial != 1%}
														<div class="contact-details mt-10">
															<div class="contact-icon">
																{% if item.tipo == 'text'%}
																<img src="{{assets}}vcard/images/contact/user-icon.svg" alt="mail-icon">
																{% elseif item.tipo == 'date'%}
																<img src="{{assets}}vcard/images/contact/calendar-icon.svg" alt="mail-icon">
																{% elseif item.tipo == 'email'%}
																<img src="{{assets}}vcard/images/contact/mail-icon.svg" alt="mail-icon">
																{% elseif item.tipo == 'tel'%}
																<img src="{{assets}}vcard/images/contact/call-icon.svg" alt="phone-icon">
																{% endif%}
															</div>
															<div class="contact-content">
																<h4>{{item.campo}}</h4>

																{% if item.tipo == 'text'%}
																<p class="mt-10">{{item.valor}}</p>
																{% elseif item.tipo == 'date'%}
																<p class="mt-10">{{item.valor}}</p>
																{% elseif item.tipo == 'email'%}
																<a href="mailto:{{item.valor}}"><p class="mt-10">{{item.valor}}</p></a>
																{% elseif item.tipo == 'tel'%}
																<a href="tel:{{item.valor}}"><p class="mt-10">{{item.valor}}</p></a>
																{% endif%}
																
															</div>
														</div>
													  {% endif %}
                                                    {% endif %}
                            {% endfor%}

							
							
							
						
						</div>
					</div>
				</div>
				
				<div class="add-to-contact container">
					<div class="add-to-contact-wrap">
						<a href="javascript:void(0)" class="scan-btn" data-bs-toggle="modal" data-bs-target="#product-modal">
							<img src="{{assets}}vcard/images/bottom-sec/scan-icon.svg" alt="scan-icon">
						</a>
						<a href="javascript:shareURL('{{assets}}card/index/{{param_id}}','{{institucion.institucion}}','{{seccion.seccion}}')" class="scan-btn">
							<img src="{{assets}}vcard/images/bottom-sec/share-icon.svg" alt="share-icon">
						</a>
						<a href="{{assets}}card/agregarContacto/{{param_id}}" class="add-to-btn">
							<div class="add-to-btn-sec">
								<div class="add-txt">Agregar contacto</div>
								<div class="plus-btn"><img src="{{assets}}vcard/images/bottom-sec/plus-icon.svg" alt="plus-icon"></div>
							</div>
						</a>
					</div>		
				</div>
				<div class="footer mt-10">
					<p>FIMPES</p>
				</div>
			</div>
		</section>
		<!--Freelancer content end -->
		<!--  Scan modal start -->
		<div class="modal fade" id="product-modal" tabindex="-1"  aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						<div class="scan-content">
							<div class="scanner">
								<img src="https://quickchart.io/qr?text={{assets}}card/agregarContacto/{{param_id}}" alt="scanner-img" class="">
							</div>
							<div class="scan-txt mt-20">
								<p>Escaneame</p>
							</div>
						</div>
						<div class="qr-btn mt-30">
							<div class="btn1">
								<a href="{{assets}}card/agregarContacto/{{param_id}}">Descargar</a>
							</div>
							<div class="btn1">
								<a href="javascript:void(0)" onclick="shareURL('{{assets}}card/index/{{param_id}}','{{institucion.institucion}}','{{seccion.seccion}}')">Compartir</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--  Scan modal end -->
		<!--  Share modal start -->
		<div class="modal fade" id="share-media-modal" tabindex="-1"  aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">Share On</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						<div class="social-media-content">
							<div class="social-media-img">
								<a href="https://www.facebook.com/" target="_blank"><img src="{{assets}}vcard/images/social-icon/icon2.svg" alt="social-icon"></a>
							</div>
							<div class="social-media-img">
								<a href="https://www.instagram.com/" target="_blank"><img src="{{assets}}vcard/images/social-icon/icon3.svg" alt="social-icon"></a>
							</div>
							<div class="social-media-img">
								<a href="https://wa.me/+1234567890" target="_blank"><img src="{{assets}}vcard/images/social-icon/icon4.svg" alt="social-icon"></a>
							</div>
							<div class="social-media-img">
								<a href="https://www.linkedin.com/" target="_blank"><img src="{{assets}}vcard/images/social-icon/icon5.svg" alt="social-icon"></a>
							</div>
							<div class="social-media-img">
								<a href="https://x.com/" target="_blank"><img src="{{assets}}vcard/images/social-icon/icon6.svg" alt="social-icon"></a>
							</div>
							<div class="social-media-img">
								<a href="https://web.telegram.org/a/" target="_blank"><img src="{{assets}}vcard/images/social-icon/icon7.svg" alt="social-icon"></a>
							</div>
							<div class="social-media-img">
								<a href="https://analytics.pinterest.com/login/" target="_blank"><img src="{{assets}}vcard/images/social-icon/icon10.svg" alt="social-icon"></a>
							</div>
							<div class="social-media-img">
								<a href="mailto:jordan.smith@mail.com" target="_blank"><img src="{{assets}}vcard/images/social-icon/icon9.svg" alt="social-icon"></a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--  Share modal end -->
		
	</div>


   {% endblock %}