<!DOCTYPE html>
<html tabindex="0" data-settings-key="athletes-settings-v1">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval';"/>

        <title>Athletes - Sauce for Zwiftâ„¢</title>

        <script src="./src/preloads.js"></script>

        <link rel="manifest" href="athletes-manifest.json"/>
        <link id="favicon" rel="shortcut icon" href="images/favicon.png"/>
        <link rel="stylesheet" href="css/common.css"/>
        <link rel="stylesheet" href="css/athletes.css"/>

        <script type="module">
            import {main} from './src/athletes.mjs';
            main();
        </script>
    </head>
    <body>
        <div id="titlebar" class="always-visible">
            <header>
                <div class="logo"><img src="images/icon128.png"/></div>
                <div class="title">Athletes</div>
                <div class="filter"><input type="text" name="filter" placeholder="filter"></input></div>
                <div class="filler"></div>
                <div class="buttons">
                    <div title="Search" class="button search">
                        <ms>search</ms>
                        <div class="search-box">
                            <input type="text" placeholder="search"/>
                            <div class="results"></div>
                        </div>
                    </div>
                    <!--<a class="button open-settings" href="athletes-settings.html?width=400&height=400&child-window"
                       title="Open settings window" target="athletes-settings"><ms>settings</ms></a>-->
                    <div title="Minimize" class="button minimize electron-only"><ms>minimize</ms></div>
                    <div title="Close this window" class="button close electron-only"><ms>close</ms></div>
                </div>
            </header>
        </div>
        <div id="content">
            <section class="following">
                <header title="Click to collapse/expand">Following <ms class="expanded-only">expand_less</ms><ms class="compressed-only">expand_more</ms></header>
                <div class="cards"></div>
            </section>
            <section class="marked">
                <header title="click to collapse/expand">Marked <ms class="expanded-only">expand_less</ms><ms class="compressed-only">expand_more</ms></header>
                <div class="cards"></div>
            </section>
            <section class="followers">
                <header title="click to collapse/expand">Followers <ms class="expanded-only">expand_less</ms><ms class="compressed-only">expand_more</ms></header>
                <div class="cards"></div>
            </section>
        </div>
    </body>
</html>
