{% extends "base.html" %}
{% block title %}Login — 3D-Druck-AG{% endblock %}

{% block content %}
<div style="text-align: center; margin-bottom: 1.5rem;">
    <h1>Wer bist du?</h1>
    <p style="color: var(--text-light);">Such dein Profil und klick drauf.</p>
</div>

{% if profile %}
<div class="grid" style="grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; max-width: 900px; margin: 0 auto;">
    {% for p in profile %}
    <a href="{{ url_for('profil.login_pin', profil_id=p.id) }}"
       class="card profil-kachel{% if p.rolle == 'power' %} profil-power{% endif %}">
        {% if p.rolle == 'power' %}
        <div style="font-size: 3rem;">🔧</div>
        <div style="font-weight: 600; margin-top: 0.3rem;">{{ p.vorname }}</div>
        <div style="font-size: 0.8rem; color: var(--text-light);">Power-User</div>
        {% else %}
        <div style="font-size: 3rem;">{{ tier_emoji(p.tier) }}</div>
        <div style="font-weight: 600; margin-top: 0.3rem;">{{ p.vorname }}</div>
        <div style="font-size: 0.8rem; color: var(--text-light);">{{ tier_name(p.tier) }}</div>
        {% endif %}
    </a>
    {% endfor %}
</div>
{% else %}
<div class="card" style="max-width: 600px; margin: 2rem auto; text-align: center;">
    <h2>Noch keine Profile angelegt</h2>
    <p>Der Lehrer muss erst Profile anlegen. Sag Herb oder Herr Rechmann Bescheid.</p>
    <p style="margin-top: 1rem;"><a href="{{ url_for('admin.admin_login') }}" class="btn btn-secondary">Admin-Login</a></p>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<style>
.profil-kachel {
    text-decoration: none;
    color: inherit;
    text-align: center;
    padding: 1.5rem 0.8rem;
    transition: transform 0.15s, box-shadow 0.15s;
    cursor: pointer;
}
.profil-kachel:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.profil-power {
    border-color: var(--primary);
    background: linear-gradient(180deg, #fff, var(--info-bg));
}
</style>
{% endblock %}