118 lines
No EOL
3.8 KiB
HTML
118 lines
No EOL
3.8 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Conflictos{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
<div style="margin-bottom: 2rem;">
|
|
<h2><i class="fas fa-exclamation-triangle"></i> Conflictos Monitorizados</h2>
|
|
<p>Define temas o conflictos para generar líneas de tiempo automáticas basadas en palabras clave.</p>
|
|
</div>
|
|
|
|
<!-- Create Form -->
|
|
<div class="card" style="margin-bottom: 2rem;">
|
|
<h3>Crear Nuevo Conflicto</h3>
|
|
<form action="{{ url_for('conflicts.create') }}" method="POST">
|
|
<div class="filter-row">
|
|
<div class="filter-group" style="flex: 2;">
|
|
<label>Nombre del Conflicto</label>
|
|
<input type="text" name="name" placeholder="Ej: Camboya vs Tailandia" required>
|
|
</div>
|
|
<div class="filter-group" style="flex: 3;">
|
|
<label>Palabras Clave (separadas por coma)</label>
|
|
<input type="text" name="keywords" placeholder="Ej: Camboya, Tailandia, Preah Vihear" required>
|
|
</div>
|
|
<div class="filter-group">
|
|
<label> </label>
|
|
<button type="submit" class="btn btn-primary" style="width: 100%;">Crear</button>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 10px;">
|
|
<label style="font-weight: 600; font-size: 0.9rem;">Descripción (Opcional)</label>
|
|
<input type="text" name="description" style="width: 100%;"
|
|
placeholder="Breve descripción del contexto...">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- List -->
|
|
<div class="conflicts-grid">
|
|
{% for c in conflicts %}
|
|
<div class="card conflict-card">
|
|
<div class="conflict-header">
|
|
<h3>{{ c.name }}</h3>
|
|
<form action="{{ url_for('conflicts.delete', id=c.id) }}" method="POST"
|
|
onsubmit="return confirm('¿Eliminar este conflicto?');">
|
|
<button type="submit" class="btn-icon" title="Eliminar"><i class="fas fa-trash"></i></button>
|
|
</form>
|
|
</div>
|
|
<p class="conflict-desc">{{ c.description or 'Sin descripción' }}</p>
|
|
<div class="keyword-tags">
|
|
{% for k in c.keywords.split(',') %}
|
|
{% if k.strip() %}
|
|
<span class="badge">{{ k.strip() }}</span>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
<div style="margin-top: 1rem; text-align: right;">
|
|
<a href="{{ url_for('conflicts.timeline', id=c.id) }}" class="btn">
|
|
<i class="fas fa-stream"></i> Ver Línea de Tiempo
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<p style="text-align: center; color: #666;">No hay conflictos definidos.</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.conflicts-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.conflict-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.conflict-header h3 {
|
|
margin: 0;
|
|
font-size: 1.4rem;
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
.conflict-desc {
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
margin-bottom: 15px;
|
|
min-height: 40px;
|
|
}
|
|
|
|
.keyword-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
}
|
|
|
|
.btn-icon {
|
|
background: none;
|
|
border: none;
|
|
color: #999;
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
}
|
|
|
|
.btn-icon:hover {
|
|
color: #e74c3c;
|
|
}
|
|
|
|
.dark-mode .conflict-desc {
|
|
color: #aaa;
|
|
}
|
|
</style>
|
|
{% endblock %} |