<!DOCTYPE html>
<html lang="sv">

<head>
    <title>Image2ASCII</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="description" content="Fancy image to ASCII/ANSI converter" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
    <script src="{{ url_for('static', filename='index.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>

<body class="bg-dark text-light">
    <div class="toast-container position-fixed top-0 end-0 px-3 pt-4" id="toast-container"></div>
    <div id="toast-template" class="d-none">
        <div class="toast align-items-center text-white" role="alert">
            <div class="d-flex">
                <div class="toast-body"></div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    </div>

    <div class="drop-overlay"></div>
    <div class="d-flex flex-column h-100">
        <header class="bg-black py-3">
            <div class="container-fluid">
                <h1>Image2ASCII</h1>
                <p class="m-0">Yes, it's slow. But it's also on a free hosting platform.</p>
            </div>
        </header>

        <div class="flex-grow-1">
            <div class="container-fluid mb-3">
                <form action="/post" method="post" id="form" enctype="multipart/form-data">
                    <div class="row">

                        <div class="col-12 mb-2">
                            <div class="row align-items-center justify-content-lg-evenly">
                                <div class="col-auto my-3 d-none d-xl-block">
                                    <img src="{{ url_for('static', filename='pointing.png') }}" class="pointing-hand">
                                </div>
                                <div class="col col-lg-auto mt-3">
                                    <div class="row align-items-center">
                                        <div class="col-12 col-lg-auto mb-3">
                                            <input type="file" name="image" id="image" class="d-none" accept="image/*">
                                            <input type="hidden" name="image-url" id="image-url">
                                            <a href=""><label for="image">Upload an image</label></a>,
                                            paste or drag &amp; drop it anywhere, or select a flag you like:
                                        </div>
                                        <div class="col-12 col-lg-auto mb-3">
                                            <select name="flag" id="flag" class="form-select bg-dark text-light form-control">
                                                <option value=""></option>
                                                {% for flag in flags %}
                                                <option value="{{ flag.value }}"{% if selected_flag == flag.value %} selected{% endif %}>{{ flag.text }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-auto my-3 d-none d-xl-block">
                                    <img src="{{ url_for('static', filename='pointing.png') }}" class="pointing-hand mirrored">
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-xl-4 col-xxl-5 mb-3">
                            <div class="row">
                                <div class="col-12 col-sm-6 col-lg-4 col-xl-6 mb-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" name="color" id="color" value="true"
                                            {% if color %} checked{% endif %}>
                                        <label class="form-check-label" for="color">Colour</label>
                                        <div class="form-text">Outputs in glorious ANSI colour.</div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-lg-4 col-xl-6 mb-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" name="crop" id="crop" value="true"
                                            {% if crop %} checked{% endif %}>
                                        <label class="form-check-label" for="crop">Crop</label>
                                        <div class="form-text">Crops empty areas at all edges.</div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-lg-4 col-xl-6 mb-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" name="invert" id="invert"
                                            value="true" {% if invert %} checked{% endif %}>
                                        <label class="form-check-label" for="invert">Invert</label>
                                        <div class="form-text">Fills characters that would have been empty, and vice versa.</div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-lg-4 col-xl-6 mb-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" name="negative"
                                            id="negative" value="true" {% if negative %} checked{% endif %}>
                                        <label class="form-check-label" for="negative">Negative</label>
                                        <div class="form-text">Inverts the colours of the image before processing.</div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-lg-4 col-xl-6 mb-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" name="fill-all"
                                            id="fill-all" value="true"{% if fill_all %} checked{% endif %}{% if not color %} disabled{% endif %}>
                                        <label class="form-check-label" for="fill-all">Fill all</label>
                                        <div class="form-text">If checked, all sections of the image (except for any transparent ones) will be filled.</div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-lg-4 col-xl-6 mb-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" name="full-rgb"
                                            id="full-rgb" value="true"{% if full_rgb %} checked{% endif %}{% if not color %} disabled{% endif %}>
                                        <label class="form-check-label" for="full-rgb">Full RGB</label>
                                        <div class="form-text">Whether to make use of all 16,777,216 RGB colours, instead of the 16 predefined ANSI colours.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12 col-sm-6 col-lg-4 col-xl-12 col-xxl-6 mb-3">
                                    <label for="contrast" class="form-label">Contrast</label>
                                    <div class="row">
                                        <div class="col-auto flex-grow-1">
                                            <input type="range" name="contrast" id="contrast" class="form-range" min="0.5" max="3.0"
                                                step="0.1" value="{{ contrast }}">
                                        </div>
                                        <div id="contrast-value" class="col-auto">{{ contrast }}</div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-lg-4 col-xl-12 col-xxl-6 mb-3">
                                    <label for="brightness" class="form-label">Brightness</label>
                                    <div class="row">
                                        <div class="col-auto flex-grow-1">
                                            <input type="range" name="brightness" id="brightness" class="form-range" min="0.5" max="3.0"
                                                step="0.1" value="{{ brightness }}">
                                        </div>
                                        <div class="col-auto" id="brightness-value">{{ brightness }}</div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-lg-4 col-xl-12 col-xxl-6 mb-3">
                                    <label for="color-balance" class="form-label">Colour balance</label>
                                    <div class="row">
                                        <div class="col-auto flex-grow-1">
                                            <input type="range" name="color-balance" id="color-balance" class="form-range" min="0.5"
                                                max="3.0" step="0.1" value="{{ color_balance }}">
                                        </div>
                                        <div class="col-auto" id="color-balance-value">{{ color_balance }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-auto">
                                    <button type="submit" id="submit" class="btn btn-primary">Update</button>
                                </div>
                                <div class="col-auto">
                                    <button type="button" id="reset" class="btn btn-secondary">Reset adjustments</button>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-md mt-3 mt-xl-0">
                            <div class="box pb-0 d-md-inline-block" id="result-box"{% if not output %} style="display:none !important"{% endif %}>
                                <div id="output" class="mb-3">{{ output|safe }}</div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <footer class="bg-black py-3">
            <div class="container-fluid small">
                By Robert Huselius.
                <a href="https://github.com/Eboreg/image2ascii">Here</a> are the sources for this thing,
                <a href="https://odysee.com/@klaatu:0">here</a> is my completely unrelated Odysee channel, and
                <a href="https://anchor.fm/musikens-makt">here</a> is my equally unrelated Swedish podcast.
            </div>
        </footer>
    </div>
</body>

</html>
