$code:
    people = {
        "Sean Joyce": (
            "City Manager / Interim City Manager",
            "1996-2004; 2020/09-2021/06; 2025/02-2025/03"
        ),
        "Mike Copp": (
            "City Manager",
            "2004-2006"
        ),
        "Lilian Myers": (
            "City Manager",
            "2006-2009/06"
        ),
        "John Davidson": (
            "City Manager",
            "2009/06-2011/11"
        ),
        "Sergio Gonzalez — manager": (
            "City Manager",
            "2011/11-2017/05"
        ),
        "Elaine Aguilar — manager": (
            "Interim City Manager",
            "2017/05-2017/11"
        ),
        "Stephanie DeWolfe": (
            "City Manager",
            "2017/11-2020/09"
        ),
        "Arminé Chaparyan": (
            "City Manager",
            "2021/06-2024/07"
        ),
        "Sheila Pautsch": (
            "Co-Acting City Manager",
            "2024/07"
        ),
        "Brian Solinsky": (
            "Co-Acting City Manager",
            "2024/07"
        ),
        "Donald Penman": (
            "Interim City Manager",
            "2024/07-2025/02"
        ),
        "L. Todd Hileman": (
            "City Manager",
            "2025/03-"
        ),

        "Gay Forbes": (
            "Assistant City Manager",
            "1998/03-2004/12"
        ),
        "Marc Castagnola": (
            "Assistant City Manager",
            "2005-2006"
        ),
        "Andre Dupret": (
            "Assistant City Manager",
            "2007-2008"
        ),
        "Sergio Gonzalez — assistant": (
            "Assistant City Manager",
            "2008/12-2011/11"
        ),
        "Hilary Straus": (
            "Assistant City Manager",
            "2012/09-2015/04"
        ),
        "Elaine Aguilar — assistant": (
            "Interim Assistant City Manager",
            "2020/09-2021/12"
        ),
        "Domenica Megerdichian": (
            "Deputy City Manager",
            "2022/01-2025/05"
        ),
        "Ken Louie": (
            "Interim Deputy City Manager — Finance",
            "2022/10-2022/12"
        ),
        "Luis Frausto-Ramirez": (
            "Acting Deputy City Manager",
            "2024/04-2024/07"
        ),
        "Nick Kimball": (
            "Assistant City Manager / CFO",
            "2025/07-"
        ),

        "David Watkins": (
            "Planning and Building Director",
            "2000/03-2018/08"
        ),
        "David Bergman": (
            "Interim Planning and Building Director",
            "2018/09-2019/10"
        ),
        "Joanna Hankamer": (
            "Planning and Community Development Director",
            "2019/10-2021/08"
        ),
        "Margaret Lin — acting": (
            "Interim Planning and Community Development Director",
            "2021/08-2021/10"
        ),
        "Angelica Frausto-Lupo": (
            "Community Development Director",
            "2021/10-2024/10"
        ),
        "Alison Becker — acting": (
            "Acting Community Development Director",
            "2024/10-2025/03"
        ),
        "Bradley Evanson": (
            "Interim Community Development Director",
            "2025/04-2025/05"
        ),
        "Erika Ramirez": (
            "Community Development Director",
            "2025/06-"
        ),

        "Margaret Lin — deputy": (
            "Deputy Community Development Director",
            "2021/10-2022/03"
        ),
        "Elizabeth Bar-El": (
            "Interim Community Development Deputy Director — Housing Policy",
            "2022/07-2022/11; 2024/11-2025/04"
        ),
        "Alison Becker — deputy": (
            "Community Development Deputy Director",
            "2022/12-2024/10"
        ),

        "Jim Van Winkle": (
            "Public Works Director",
            "2000-2004"
        ),
        "William Galvez": (
            "Public Works Director",
            "2004-2006"
        ),
        "Shin Furukawa — director": (
            "Public Works Director / Acting Public Works Director",
            "2007-2011"
        ),
        "Paul Toor": (
            "Public Works Director",
            "2012-2018/02"
        ),
        "Rafael Casillas — director": (
            "Acting Public Works Director",
            "2018/02-2019/07"
        ),
        "Shahid Abbas": (
            "Public Works Director",
            "2019/07-2021/11"
        ),
        "H. Ted Gerber — director": (
            "Acting / Permanent Public Works Director",
            "2021/11-2025/09"
        ),
        "Julian Lee — director": (
            "Public Works Director",
            "2025/10-"
        ),

        "Shin Furukawa — deputy": (
            "Deputy Public Works Director",
            "2005-2007/04; 2011-2016/03"
        ),
        "Rafael Casillas — deputy": (
            "Deputy Public Works Director",
            "2017/08-2018/09"
        ),
        "Kristine Courdy": (
            "Deputy Public Works Director — Engineering and Operations",
            "2018/02-2021/01"
        ),
        "Julian Lee — deputy": (
            "Deputy Public Works Director — Water and Sustainability",
            "2019/08-2021/06"
        ),
        "Garrett Crawford": (
            "Acting Deputy Public Works Director — Engineering and Operations",
            "2021/01-2021/07"
        ),
        "Anteneh Tesfaye — acting": (
            "Acting Deputy Public Works Director — Water and Operations",
            "2021/02-2021/05"
        ),
        "H. Ted Gerber — deputy": (
            "Deputy Public Works Director — Water and Sustainability",
            "2021/07-2021/11"
        ),
        "Anteneh Tesfaye — deputy": (
            "Deputy Director of Public Works",
            "2022-2026/05"
        )
    }

    END_YEAR = 2026

    def bar_position(period):
        period = period.strip()

        if "-" in period:
            start, end = period.split("-", 1)
            start = int(start[:4])
            end = int(end[:4]) if end else END_YEAR
        else:
            start = end = int(period[:4])

        start = max(start, 2000)
        end = min(end, END_YEAR)

        column = start - 1998
        span = end - start + 1

        return column, span

    groups = [
        (
            "City Management",
            "manager",
            [
                (name, details)
                for name, details in people.items()
                if "City Manager" in details[0]
            ]
        ),
        (
            "Planning",
            "planning",
            [
                (name, details)
                for name, details in people.items()
                if (
                    "Planning" in details[0]
                    or "Community Development" in details[0]
                )
            ]
        ),
        (
            "Public Works",
            "works",
            [
                (name, details)
                for name, details in people.items()
                if "Public Works" in details[0]
            ]
        )
    ]

<style>
.timeline-container {
    width: 100%;
    overflow-x: auto;
}

.timeline {
    min-width: 900px;
    padding: 10px;
    font: 13px system-ui, sans-serif;
    color: #222;
}

.axis,
.person {
    display: grid;
    grid-template-columns: 180px repeat(27, 1fr);
    min-height: 28px;
}

.axis {
    margin-bottom: 10px;
    border-bottom: 1px solid #999;
}

.axis span {
    padding-bottom: 4px;
    font-size: 11px;
    color: #666;
}

.department {
    --color: #777;
}

.department.manager {
    --color: #7057d9;
}

.department.planning {
    --color: #16876d;
}

.department.works {
    --color: #d87a19;
}

.department h2 {
    margin: 22px 0 9px;
    color: var(--color);
    font-size: 17px;
    border-bottom: 2px solid var(--color);
}

.person {
    align-items: center;
}

.person:hover {
    background: #00000008;
}

.name {
    grid-column: 1;
    grid-row: 1;
    padding-right: 10px;
    text-align: right;
    line-height: 1.1;
}

.bar {
    grid-row: 1;
    height: 17px;
    margin: 3px 1px;
    border-radius: 3px;
    background: var(--color);
    box-shadow: inset 0 -2px #0002;
}

.person.deputy .name {
    font-size: 12px;
    color: #666;
}

.person.deputy .name::before {
    /* content: "↳ "; */
}

.person.deputy .bar {
    height: 10px;
    margin-top: 7px;
    opacity: 0.6;
}
</style>

<div class="timeline-container">
<div class="timeline">
<div class="axis">
    <span></span>
$for year in range(2000, 2026, 5):
    <span style="grid-column: ${year - 1998};">$year</span>
</div>

$for department, css_class, members in groups:
    <div class="department $css_class">
        <h2>$department</h2>
    $for name, (position, tenure) in members:
        $ display_name = name.split(" — ")[0]
        $ deputy_class = " deputy" if ("Deputy" in position or "Assistant City Manager" in position) else ""
        <div class="person${deputy_class}">
            <div class="name" title="$position">$display_name</div>
        $for period in tenure.split(";"):
            $ column, span = bar_position(period)
            <div class="bar" style="grid-column: $column / span $span;" title="$position — $tenure"></div>
        </div>
    </div>
</div>
</div>