{% extends "template.html" %}

{% block content %}
<div class="mb-6">
	<h1 class="text-2xl font-semibold text-slate-800 dark:text-white mb-1">Humeurs</h1>
	<p class="text-sm text-slate-600 dark:text-slate-400">
		Statuts Discord qui changeront automatiquement toutes les 10 minutes.
	</p>
</div>

<div class="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 overflow-hidden mb-6">
	{% if humeurs %}
	<ul class="divide-y divide-slate-200 dark:divide-slate-700">
		{% for humeur in humeurs %}
		<li class="flex items-center justify-between px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors group">
			<span class="text-sm text-slate-700 dark:text-slate-300">{{ humeur.text }}</span>
			<a href="{{ url_for('delHumeur', id = humeur.id) }}" onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette humeur ?')" class="p-1.5 text-slate-400 hover:text-red-500 dark:hover:text-red-400 rounded opacity-0 group-hover:opacity-100 transition-all" title="Supprimer">
				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
			</a>
		</li>
		{% endfor %}
	</ul>
	{% else %}
	<div class="px-4 py-8 text-center">
		<p class="text-sm text-slate-500 dark:text-slate-400">Aucune humeur configurée</p>
	</div>
	{% endif %}
</div>

<div class="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 p-5">
	<h2 class="text-lg font-medium text-slate-800 dark:text-white mb-4">Ajouter une humeur</h2>
	
	<form action="{{ url_for('addHumeur') }}" method="POST">
		<div class="flex flex-col sm:flex-row gap-3">
			<div class="flex-1">
				<input type="text" name="text" id="text" placeholder="Joue à un super jeu..." class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-300 dark:border-slate-600 rounded-lg text-sm text-slate-900 dark:text-white placeholder-slate-500 dark:placeholder-slate-400 focus:ring-2 focus:ring-slate-500 focus:border-transparent transition-all">
			</div>
			<button type="submit" class="px-4 py-2 bg-slate-800 hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600 text-white text-sm font-medium rounded-lg transition-colors whitespace-nowrap">
				Ajouter
			</button>
		</div>
	</form>
</div>
{% endblock %}