<!DOCTYPE html>
<head>
    <title>fedi-block-api{% if domain %} {{domain}}{% endif %}</title>
    <style>
        body {
            background-color: #000022;
            color: #ffffff;
            text-align: center;
        }
        .block_level {
            background-color: #1c1c3c;
            width: 750px;
            padding: 5px;
            margin: auto;
            margin-top: 10px;
        }
        .block {
            background-color: #2d2d4d;
            padding: 5px;
            margin: 5px;
        }
        a {
            color: #ffffff;
        }
        .info {
            margin-top: 25px;
        }
        input[type="text"], input[type="submit"] {
            padding: 5px;
            border-radius: 5px;
            color: white;
            background: #445;
            font-size: 16px;
        }

        input[type="text"]:hover {
            border-color: #f08;
        }

        input[type="submit"] {
            cursor: pointer;
        }

        input[type="submit"]:hover {
            border-color: #f08;
        }
    </style>
</head>
<body>
    {% if reason %}
        <h1>Instances that use "{{reason}}" in their Reason</h1>
        {% for block_level in blocks.blocks %}
            <div class="block_level">
                <h2>{{block_level}} ({{blocks.blocks[block_level]|length}})</h2>
                {% for block in blocks.blocks[block_level] %}
                    <div class="block">
                        <img src="/fedi-block-api/favicons/{{block.blocker}}.png" width=16/>
                        <b><a href="https://{{block.blocker}}">{{block.blocker}}</a></b> -> 
                        <img src="/fedi-block-api/favicons/{{block.blocked}}.png" width=16/>
                        <b><a href="https://{{block.blocked}}">{{block.blocked}}</a></b><br/>
                        {{block.reason}}
                    </div>
                {% endfor %}
            </div>
        {% endfor %}
    {% elif blocks %}
        <h1>Instances that block {{domain}}</h1>
        {% for block_level in blocks.blocks %}
            <div class="block_level" id="{{block_level}}">
                <h2>{{block_level}} ({{blocks.blocks[block_level]|length}})</h2>
                {% for block in blocks.blocks[block_level] %}
                    <div class="block">
                        <img src="/fedi-block-api/favicons/{{block}}.png" width=16/>
                        <b><a href="https://{{block}}">{{block}}</a></b><br/>
                        {% if block_level in blocks.reasons %}
                            {{blocks.reasons[block_level][block]}}
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        {% endfor %}
    {% else %}
        <h1>Enter a Domain</h1>
        <form>
            <input type="text" name="domain" placeholder="example.com" />
            <input type="submit" value="Submit" />
        </form>
        <h1>Enter a Reason</h1>
        <form>
            <input type="text" name="reason" placeholder="free speech" />
            <input type="submit" value="Submit" />
        </form>
        <div class="info">
            known instances: {{info.known_instances}}<br/>
            indexed instances: {{info.indexed_instances}}<br/>
            blocks recorded: {{info.blocks_recorded}}<br/>
            source code: <a href="{{info.source_code}}">{{info.source_code}}</a>
        </div>
    {% endif %}
</body>
</html>
