{% extends "base.html" %}

{% block content %}
<h1>Meet the CyberCorp Team</h1>

<style>
    .card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    .card {
        width: 300px;
        border: 1px solid #ccc;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
    }
    .card img {
        width: 100%;
        height: auto;
    }
    .card-body {
        padding: 15px;
    }
    .card h3 {
        margin: 0 0 5px;
    }
    .card p {
        margin: 5px 0;
    }
    .email {
        font-size: 0.9em;
        color: #333;
    }
</style>

<div class="card-container">
    {% for person in team %}
    <div class="card">
        <img src="{{ person.photo }}" height="200" alt="{{ person.first_name }} {{ person.last_name }}">
        <div class="card-body">
            <h3>{{ person.first_name }} {{ person.last_name }}</h3>
            <br>
            <!--<p class="email"><strong>Email:</strong> <a href="mailto:{{ person.email }}">{{ person.email }}</a></p>-->
            <p><strong>Department:</strong> {{ person.department }}</p>
            <p>{{ person.bio }}</p>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}