{% extends "admin/base.html" %}
{% load static %}

{% block title %} Plugins Okira | HubStation {% endblock %}



{% block content_title %}
<div class="d-flex">
	<div class="text-primary"> Plugins </div>
	<div> &nbsp; </div>
	<div style="color:orange;"> Okira </div>
</div>
{% endblock %}

{% block content %}
{% for plugin in plugins %}

<div class="col-12 col-sm-6 col-md-4 col-lg-3 p-2">
	<div class="card">
		<div class="card-body">
			<div>
				<div class="text-center card-image">
					<img style="width:60px;height:60px;" src="{{plugin.img}}">
				</div>
				<div class="py-2">
					<div class="h6 text-center"> {{plugin.name}} </div>
					<div class="py-1 text-center">
						<div style="min-height: 75px;"> <small> {{plugin.description}} </small> </div>
						<div class="pt-3">
							<a href="{{plugin.link}}" class="btn btn-primary"> <i class="fas fa-play">&nbsp;</i>Lancer </a>
						</div>
					</div>
				</div>
			</div>			
		</div>
	</div>
</div>

{% endfor %}
<!--
<div class="col-12 col-sm-6 col-md-4 col-lg-3 p-2">
	<div class="card">
		<div class="card-body">
			<div>
				<div class="text-center card-image">
					<img style="width:60px;height:60px;" src="/static/global/maketteur.jpeg">
				</div>
				<div class="py-2">
					<div class="h6 text-center"> Maketteur </div>
					<div class="py-1 text-center">
						<div style="min-height: 75px;"> <small> Cet Utilitaire est utilisé pour créer des données qui seront utilisées par les Hubs d'Okira Station </small> </div>
						<div class="pt-3">
							<a href="/maketteur/" class="btn btn-primary"> Lancer </a>
						</div>
					</div>
				</div>
			</div>			
		</div>
	</div>
</div>

<div class="col-12 col-sm-6 col-md-4 col-lg-3 p-2">
	<div class="card">
		<div class="card-body">
			<div>
				<div class="text-center card-image">
					<img style="width:60px;height:60px;" src="/static/global/autograph.png">
				</div>
				<div class="py-2">
					<div class="h6 text-center"> AutoGraphe </div>
					<div class="py-1 text-center">
						<div style="min-height: 75px;"> <small> Des Graphes, courbes et autres schemas graphiques pour illustrer le comportement de vos donnees </small> </div>
						<div class="pt-3">
							<a href="/autograph/" class="btn btn-primary"> Lancer </a>
						</div>
					</div>
				</div>
			</div>			
		</div>
	</div>
</div>

<div class="col-12 col-sm-6 col-md-4 col-lg-3 p-2">
	<div class="card">
		<div class="card-body">
			<div>
				<div class="text-center card-image">
					<img style="width:60px;height:60px;border-radius: 100%;" src="/static/global/smile.jpg">
				</div>
				<div class="py-2">
					<div class="h6 text-center"> EasyLife </div>
					<div class="py-1 text-center">
						<div style="min-height: 75px;"> <small> Des Raccourcis pour effectuer des requetes longues en une interface </small> </div>
						<div class="pt-3">
							<a href="/easylife/" class="btn btn-primary"> Lancer </a>
						</div>
					</div>
				</div>
			</div>			
		</div>
	</div>
</div>

<div class="col-12 col-sm-6 col-md-4 col-lg-3 p-2">
	<div class="card">
		<div class="card-body">
			<div>
				<div class="text-center card-image">
					<img style="width:60px;height:60px;" src="/static/global/tinymce logo.png">
				</div>
				<div class="py-2">
					<div class="h6 text-center"> TinyMce Teams </div>
					<div class="py-1 text-center">
						<div style="min-height: 75px;"> <small> Un Outil pour saisir des documents en ligne pour votre equipe </small> </div>
						<div class="pt-3">
							<a href="#" class="btn btn-warning"> Installer </a>
						</div>
					</div>
				</div>
			</div>			
		</div>
	</div>
</div>


<div class="col-12 col-sm-6 col-md-4 col-lg-3 p-2">
	<div class="card">
		<div class="card-body">
			<div>
				<div class="text-center card-image">
					<img style="width:60px;height:60px;" src="/static/global/creaform.png">
				</div>
				<div class="py-2">
					<div class="h6 text-center"> CreaForm</div>
					<div class="py-1 text-center">
						<div style="min-height: 75px;"> <small> Utilitaire de Creation de Formulaires et Imprimables intelligents  </small> </div>
						<div class="pt-3">
							<a href="#" class="btn btn-warning"> Installer </a>
						</div>
					</div>
				</div>
			</div>			
		</div>
	</div>
</div>

<div class="col-12 col-sm-6 col-md-4 col-lg-3 p-2">
	<div class="card">
		<div class="card-body">
			<div>
				<div class="text-center card-image">
					<img style="width:60px;height:60px;" src="/static/global/image-regular.png">
				</div>
				<div class="py-2">
					<div class="h6 text-center"> Desidis </div>
					<div class="py-1 text-center">
						<div style="min-height: 75px;"> <small> Utilitaire pour modifier l'Apparence des interfaces de Donnees  </small> </div>
						<div class="pt-3">
							<a href="#" class="btn btn-warning"> Installer </a>
						</div>
					</div>
				</div>
			</div>			
		</div>
	</div>
</div>

<div class="col-12 col-sm-6 col-md-4 col-lg-3 p-2">
	<div class="card">
		<div class="card-body">
			<div>
				<div class="text-center card-image">
					<img style="width:60px;height:60px;" src="/static/global/calendar-svgrepo-com.svg">
				</div>
				<div class="py-2">
					<div class="h6 text-center"> CalendApp </div>
					<div class="py-1 text-center">
						<div style="min-height: 75px;"> <small> Filtrez et Organisez vos donnees selon differentes dates et periodes </small> </div>
						<div class="pt-3">
							<a href="#" class="btn btn-warning"> Installer </a>
						</div>
					</div>
				</div>
			</div>			
		</div>
	</div>
</div>

<div class="col-12 col-sm-6 col-md-4 col-lg-3 p-2">
	<div class="card">
		<div class="card-body">
			<div>
				<div class="text-center card-image">
					<img style="width:60px;height:60px;" src="/static/global/onlyoffice.png">
				</div>
				<div class="py-2">
					<div class="h6 text-center">OnlyOffice Desktop</div>
					<div class="py-1 text-center">
						<div style="min-height: 75px;"> <small> Des Graphes, courbes et autres schemas graphiques pour illustrer le comportement de vos donnees </small> </div>
						<div class="pt-3">
							<a href="#" class="btn btn-warning"> Installer </a>
						</div>
					</div>
				</div>
			</div>			
		</div>
	</div>
</div>

<div class="col-12 col-sm-6 col-md-4 col-lg-3 p-2">
	<div class="card">
		<div class="card-body">
			<div>
				<div class="text-center card-image">
					<img style="width:60px;height:60px;" src="/static/global/netstat.png">
				</div>
				<div class="py-2">
					<div class="h6 text-center">NetStat Monitor</div>
					<div class="py-1 text-center">
						<div style="min-height: 75px;"> <small> Des Graphes, courbes et autres schemas graphiques pour illustrer le comportement de vos donnees </small> </div>
						<div class="pt-3">
							<a href="#" class="btn btn-warning"> Installer </a>
						</div>
					</div>
				</div>
			</div>			
		</div>
	</div>
</div>

<div class="col-12 col-sm-6 col-md-4 col-lg-3 p-2">
	<div class="card">
		<div class="card-body">
			<div>
				<div class="text-center card-image">
					<img style="width:60px;height:60px;" src="/static/global/stationgrok.png">
				</div>
				<div class="py-2">
					<div class="h6 text-center">Station ngrok</div>
					<div class="py-1 text-center">
						<div style="min-height: 75px;"> <small> Des Graphes, courbes et autres schemas graphiques pour illustrer le comportement de vos donnees </small> </div>
						<div class="pt-3">
							<a href="#" class="btn btn-warning"> Installer </a>
						</div>
					</div>
				</div>
			</div>			
		</div>
	</div>
</div>

<div class="col-12 col-sm-6 col-md-4 col-lg-3 p-2">
	<div class="card">
		<div class="card-body">
			<div>
				<div class="text-center card-image">
					<img style="width:60px;height:60px;" src="/static/global/stationgrok.png">
				</div>
				<div class="py-2">
					<div class="h6 text-center">ClamAv</div>
					<div class="py-1 text-center">
						<div style="min-height: 75px;"> <small> Des Graphes, courbes et autres schemas graphiques pour illustrer le comportement de vos donnees </small> </div>
						<div class="pt-3">
							<a href="#" class="btn btn-warning"> Installer </a>
						</div>
					</div>
				</div>
			</div>			
		</div>
	</div>
</div>

<div class="col-12 col-sm-6 col-md-4 col-lg-3 p-2">
	<div class="card">
		<div class="card-body">
			<div>
				<div class="text-center card-image">
					<img style="width:60px;height:60px;" src="/static/global/stationgrok.png">
				</div>
				<div class="py-2">
					<div class="h6 text-center">AlarmPy</div>
					<div class="py-1 text-center">
						<div style="min-height: 75px;"> <small> Des Graphes, courbes et autres schemas graphiques pour illustrer le comportement de vos donnees </small> </div>
						<div class="pt-3">
							<a href="#" class="btn btn-warning"> Installer </a>
						</div>
					</div>
				</div>
			</div>			
		</div>
	</div>
</div>

<div class="col-12 col-sm-6 col-md-4 col-lg-3 p-2">
	<div class="card">
		<div class="card-body">
			<div>
				<div class="text-center card-image">
					<img style="width:60px;height:60px;" src="/static/global/stationgrok.png">
				</div>
				<div class="py-2">
					<div class="h6 text-center">StickyNotes Py</div>
					<div class="py-1 text-center">
						<div style="min-height: 75px;"> <small> Des Graphes, courbes et autres schemas graphiques pour illustrer le comportement de vos donnees </small> </div>
						<div class="pt-3">
							<a href="#" class="btn btn-warning"> Installer </a>
						</div>
					</div>
				</div>
			</div>			
		</div>
	</div>
</div>

<div class="col-12 col-sm-6 col-md-4 col-lg-3 p-2">
	<div class="card">
		<div class="card-body">
			<div>
				<div class="text-center card-image">
					<img style="width:60px;height:60px;" src="/static/global/stationgrok.png">
				</div>
				<div class="py-2">
					<div class="h6 text-center">Wikipedia </div>
					<div class="py-1 text-center">
						<div style="min-height: 75px;"> <small> Des Graphes, courbes et autres schemas graphiques pour illustrer le comportement de vos donnees </small> </div>
						<div class="pt-3">
							<a href="#" class="btn btn-warning"> Installer </a>
						</div>
					</div>
				</div>
			</div>			
		</div>
	</div>
</div>

<div class="col-12 col-sm-6 col-md-4 col-lg-3 p-2">
	<div class="card">
		<div class="card-body">
			<div>
				<div class="text-center card-image">
					<img style="width:60px;height:60px;" src="/static/global/stationgrok.png">
				</div>
				<div class="py-2">
					<div class="h6 text-center">Osma </div>
					<div class="py-1 text-center">
						<div style="min-height: 75px;"> <small> Des Graphes, courbes et autres schemas graphiques pour illustrer le comportement de vos donnees </small> </div>
						<div class="pt-3">
							<a href="#" class="btn btn-warning"> Installer </a>
						</div>
					</div>
				</div>
			</div>			
		</div>
	</div>
</div>

<div class="col-12 col-sm-6 col-md-4 col-lg-3 p-2">
	<div class="card">
		<div class="card-body">
			<div>
				<div class="text-center card-image">
					<img style="width:60px;height:60px;" src="/static/global/stationgrok.png">
				</div>
				<div class="py-2">
					<div class="h6 text-center"> Inkscape </div>
					<div class="py-1 text-center">
						<div style="min-height: 75px;"> <small> Des Graphes, courbes et autres schemas graphiques pour illustrer le comportement de vos donnees </small> </div>
						<div class="pt-3">
							<a href="#" class="btn btn-warning"> Installer </a>
						</div>
					</div>
				</div>
			</div>			
		</div>
	</div>
</div>

<div class="col-12 col-sm-6 col-md-4 col-lg-3 p-2">
	<div class="card">
		<div class="card-body">
			<div>
				<div class="text-center card-image">
					<img style="width:60px;height:60px;" src="/static/global/stationgrok.png">
				</div>
				<div class="py-2">
					<div class="h6 text-center"> Metascript : Three.JS & Phaser </div>
					<div class="py-1 text-center">
						<div style="min-height: 75px;"> <small> Des Graphes, courbes et autres schemas graphiques pour illustrer le comportement de vos donnees </small> </div>
						<div class="pt-3">
							<a href="#" class="btn btn-warning"> Installer </a>
						</div>
					</div>
				</div>
			</div>			
		</div>
	</div>
</div>

<div class="col-12 col-sm-6 col-md-4 col-lg-3 p-2">
	<div class="card">
		<div class="card-body">
			<div>
				<div class="text-center card-image">
					<img style="width:60px;height:60px;" src="/static/global/stationgrok.png">
				</div>
				<div class="py-2">
					<div class="h6 text-center"> Scrabble3D </div>
					<div class="py-1 text-center">
						<div style="min-height: 75px;"> <small> Des Graphes, courbes et autres schemas graphiques pour illustrer le comportement de vos donnees </small> </div>
						<div class="pt-3">
							<a href="#" class="btn btn-warning"> Installer </a>
						</div>
					</div>
				</div>
			</div>			
		</div>
	</div>
</div>

-->

{% endblock %}

