{% load static %}

<html lang="en">
<head>
    <style>
        table {
            margin-left: 50px;
            padding: 10px;
            border-collapse: separate;
            border-spacing: 1em;
        }
    </style>
    <meta charset="UTF-8">
    <title>Browser not supported - Autoreduction</title>
</head>
<body>
    <section role="main" class="help-topic card" data-topics="experiments mine investigations">
        <div class="card-header">
            <h1>You are using an outdated browser.</h1>
        </div>
        <div class="card-body">
            <p>
                Unfortunately, you are using a browser which is outdated and is not supported by the Autoreduction
                service.
                This means that you are unable to access the Autoreduction service.
            </p>
            <p>
                Your current browser is:
            </p>
            <ul>
                <li><b>Family:</b> {{ current_browser }}</li>
                <li><b>Version:</b> {{ version }}</li>
            </ul>
            <p>
                <a href="http://outdatedbrowser.com/en">Read more about up to date browsers </a>. You can also
                click the links below to be taken directly to the download page for the latest browsers. Note that
                Microsoft Edge is only available to Windows 10 users.
            </p>
        </div>
    </section>
    <table style="width:75%">
        <tr>
            <th style="text-align: center">
                Google Chrome
            </th>
            <th style="text-align: center">
                Mozilla Firefox
            </th>
            <th style="text-align: center">
                Microsoft Edge
            </th>
        </tr>
        <tr>
            <td style="text-align: center">
                <a href="https://www.google.com/chrome/">
                    <img src="/static/images/chrome.png" alt="Chrome Logo" style="width:150px;height:150px;">
                </a>
            </td>
            <td style="text-align: center">
                <a href="https://www.mozilla.org/en-GB/firefox/new/">
                    <img src="/static/images/firefox.png" alt="Firefox Logo" style="width:150px;height:150px;">
                </a>
            </td>
            <td style="text-align: center">
                <a href="https://www.microsoft.com/en-gb/windows/microsoft-edge">
                    <img src="/static/images/edge.png" alt="Edge Logo" style="width:150px;height:150px;">
                </a>
            </td>
        </tr>
    </table>
</body>
</html>