{% macro nginx_svg(size, color='') %}<svg width="{{ size }}px" height="{{ size }}px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M15.948,2h.065a10.418,10.418,0,0,1,.972.528Q22.414,5.65,27.843,8.774a.792.792,0,0,1,.414.788c-.008,4.389,0,8.777-.005,13.164a.813.813,0,0,1-.356.507q-5.773,3.324-11.547,6.644a.587.587,0,0,1-.657.037Q9.912,26.6,4.143,23.274a.7.7,0,0,1-.4-.666q0-6.582,0-13.163a.693.693,0,0,1,.387-.67Q9.552,5.657,14.974,2.535c.322-.184.638-.379.974-.535" style="fill:{{ color or '#019639' }}"/><path d="M8.767,10.538q0,5.429,0,10.859a1.509,1.509,0,0,0,.427,1.087,1.647,1.647,0,0,0,2.06.206,1.564,1.564,0,0,0,.685-1.293c0-2.62-.005-5.24,0-7.86q3.583,4.29,7.181,8.568a2.833,2.833,0,0,0,2.6.782,1.561,1.561,0,0,0,1.251-1.371q.008-5.541,0-11.081a1.582,1.582,0,0,0-3.152,0c0,2.662-.016,5.321,0,7.982-2.346-2.766-4.663-5.556-7-8.332A2.817,2.817,0,0,0,10.17,9.033,1.579,1.579,0,0,0,8.767,10.538Z" style="fill:#fff"/></svg>{% endmacro %}
<!DOCTYPE html>
<html>
<head>
    <title>Edit / Create</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT"
          crossorigin="anonymous"
    />
    <style type="text/css" rel="stylesheet">
        body {
            /* background-color: #DDD; */
        }

        #subm {
            background-color: #DEDEDE;
        }

        #subm input {
            background: none;
            border-radius: 3px;
            color: darkred;
            border: none;
            width: 150px;
            padding: 0;
        }

        #subm input:hover,
        #subm input:focus {
            background: white;
            border: 0 !important;
            outline: none;
        }

        .abtn:hover {
            text-decoration: underline;
        }

        form.row {
            margin: 0 !important;
            padding: 0 !important;
        }

        select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
        }
    </style>
    <script type="text/javascript">
        function confirmDelete(hash_val) {
            if (confirm("Möchten Sie " + hash_val + ' wirklich löschen?')) {
                return true;
            } else {
                return false;
            }
        }
	function toggleNewHost(onoff){
	    if(onoff){
	        document.getElementById('newhost_form').style.display = 'inline-block';
	        document.getElementById('newhost_adder').style.display = 'none';
	        document.getElementById('newhost_chooser').style.display = 'none';
	    }else{
	        document.getElementById('newhost_form').style.display = 'none';
	        document.getElementById('newhost_adder').style.display = 'initial';
	        document.getElementById('newhost_chooser').style.display = 'initial';
	    }
	}
    </script>
</head>
<body>
<div class="container pt-3">
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    <div class="row mt-3 border rounded border-secondary p-3" onclick="this.parentNode.removeChild(this);"
         style="cursor:pointer">
        {% for categ, message in messages %}
        <div class="col col-12 text-{{ categ }} p-1">{{ message | safe }}</div>
        {% endfor %}
    </div>
    {% endif %}
    {% endwith %}
    <div class="row mt-3 rounded p-2" style="background-color: #CCC !important">
        <div class="col col-12 pt-3 pe-1" style="text-align:right">
            <a href="/edit" style="text-decoration:none">
                <h1>
                    <div style="display:inline-block;color:#1C274C;opacity:0.5;" class="mt-1">
                        URL Shortener
                    </div>
                    <svg width="50px" style="display: inline-block;margin-top: -30" height="50px" viewBox="0 0 24 24"
                         fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path opacity="0.5"
                              d="M14.1625 18.4876L13.4417 19.2084C11.053 21.5971 7.18019 21.5971 4.79151 19.2084C2.40283 16.8198 2.40283 12.9469 4.79151 10.5583L5.51236 9.8374"
                              stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
                        <path d="M9.8374 14.1625L14.1625 9.8374" stroke="#1C274C" stroke-width="1.5"
                              stroke-linecap="round"/>
                        <path opacity="0.5"
                              d="M9.8374 5.51236L10.5583 4.79151C12.9469 2.40283 16.8198 2.40283 19.2084 4.79151C21.5971 7.18019 21.5971 11.053 19.2084 13.4417L18.4876 14.1625"
                              stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
                    </svg>
                </h1>
            </a>
        </div>
	<div class="col col-12">
	    <form method="post" style="display:none;text-align:right;float:right;" class="ms-1"  id="newhost_form">
		    <input type="hidden" name="action" value="create-host" />
                    <input type="text" name="new_host" class="me-1" class="form-control" style="width:300px" />
		    <button type="submit" class="btn btn-success btn-sm">Add</button>
		    <button type="reset" class="btn btn-danger btn-sm" onclick="toggleNewHost(false);">Cancel</button>
	    </form>
	    <span id="newhost_adder"
		  onclick="toggleNewHost(true);"
		  style="cursor:pointer;float:right;margin-left:5px;" title="Add Host"
            >+</span>
            <select onchange="location.href='{{ url_for('edit', term=term, per_page=per_page) }}&host=' + this.value"
                    class="form-control" 
		    id="newhost_chooser"
                    style="width:auto !important;float:right;max-width:100px;font-size:small;padding:2px 4px 2px 2px;text-align:right;background:transparent;border:0;float:right;">
                <option value="default">Choose</option>
                {% for host in hosts %}
                <option value="{{ host }}" {% if host== current_host %}selected="selected" {% endif %}>{{ host }}
                </option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div class="row mt-0 mb-5 border-bottom border-secondary rounded p-3"
         style="border-color:#CCC !important;background:#DDD;">
        <form method="post" class="row">
            <input class="form-control" type="hidden" name="action" value="create">
            <div class="col-7">
                <input class="form-control" type="url" name="url" placeholder="URL"/>
            </div>
            <div class="col-1">
                <select class="form-control" name="status_code">
                    <option value="302">302</option>
                    <option value="301">301</option>
                </select>
            </div>
            <div class="col-4">
						<span class="btn border" id="subm">
							Create as <span style="color:darkred;" class="ms-1">/</span><input type="text" name="hash"
                                                                                               class="me-1"
                                                                                               value="{{ newhash }}"/>
						</span>
                <button type="submit" class="btn btn-light" style="background-color:darkgreen;color:white">&gt;&gt;
                </button>
                <a href="{{ url_for('edit', update_cache=1, term=term, per_page=per_page) }}"
                   title="Update cachefile with files here"
                   style="float:right;text-decoration:none;font-size:2em"
                   class="text-secondary ms-2">&bullet;</a>
                <a href="/edit?restart_nginx=1" title="Request to restart nginx" style="float:right">
			{{ nginx_svg(40, '#AAA') }}
                </a>
            </div>
        </form>
    </div>
    <!--
        <div class="row mt-3">
        <div class="col-12">
        <h2>Edit</h2>
        </div>
        </div>
    -->
    <div class="row mt-3 pb-3 mb-1">
        <div class="col col-12">
            <h5>{{ total_items | format_number }} Items in total</h5>
        </div>
        <div class="col-2">
            <span style="font-size:smaller;">
                Page {{ current_page }}/{{ total_pages }}
                </span>
        </div>
        <div class="col-10" style="text-align: right">
            <span style="margin-right:10px;font-size:smaller;">
                <select onchange="location.href='{{ url_for('edit', term=term) }}&per_page=' + this.value"
                        style="width:auto !important;font-size:small;padding:2px 4px 2px 2px;text-align:right;background:transparent;border:0">
                {% for ps in pagesizes %}
                <option value="{{ ps }}" {% if ps== per_page %}selected="selected" {% endif %}>{{ ps }}</option>
                {% endfor %}
            </select>&nbsp;/&nbsp;Page
            </span>
            {% if paginator[0] %}
            <a class="btn btn-outline btn-sm"
               href="{{ url_for('edit', page=paginator[1], term=term, per_page=per_page) }}">&nbsp;&lt;</a>
            {% if paginator[0][0] != 1 %}
            <a class="btn btn-outline-secondary btn-sm"
               href="{{ url_for('edit', page=1, term=term, per_page=per_page) }}">1</a>
            ...
            {% endif %}
            {% for page_num in paginator[0] %}
            {% if page_num == current_page %}
            <span class="btn btn-secondary btn-sm">{{ page_num }}</span>
            {% else %}
            <a class="btn btn-outline-secondary btn-sm"
               href="{{ url_for('edit', page=page_num, term=term, per_page=per_page) }}">{{
                page_num }}</a>
            {% endif %}
            {% endfor %}

            {% if paginator[0][-1] != total_pages %}
            ...
            <a class="btn btn-outline-secondary btn-sm"
               href="{{ url_for('edit', page=total_pages, term=term, per_page=per_page) }}">{{
                total_pages }}</a>
            {% endif %}
            <a class="btn btn-outline btn-sm"
               href="{{ url_for('edit', page=paginator[2], term=term, per_page=per_page) }}">&nbsp;&gt;</a>
            {% endif %}
        </div>
    </div>
    <div class="row mb-3">
        <form class="row mb-1" method="get">
            <!--
                <div class="col col-1">
                <a class="btn btn-outline-info" href="/edit">Clear</a>
                </div>
            -->
            <div class="col col-11">
                <input type="text" class="form-control" name="term" value="{{ term }}"
                       placeholder="Search in URL (may take a long time)"/>
            </div>
            <div class="col col-1">
                <a href="{{ url_for('edit', per_page=per_page) }}" class="btn btn-sm">
                    <svg fill="#999" height="20px" width="20px" version="1.1" id="Capa_1"
                         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                         viewBox="0 0 25.283 25.283" xml:space="preserve">
                      <g>
	                      <path d="M4.153,4.757v20.526h17V4.757H4.153z M8.569,22.386H5.775V7.82H8.57L8.569,22.386L8.569,22.386z M13.886,22.386h-2.797 V7.82h2.797C13.886,7.82,13.886,22.386,13.886,22.386z M19.202,22.386h-2.795V7.82h2.795V22.386z"/>
                          <path d="M19.931,3.704L21.13,3.7l-0.002-2.4l-5.463-0.006l-0.01-0.657c-1.643-0.875-4.76-0.82-6.014-0.014v0.702H4.13l0.004,2.402 h1.199L19.931,3.704z"/>
                      </g>
                </a>
            </div>
            <!--
                <div class="col col-1">
                <input type="submit" class="btn btn-outline-secondary" value="Search" />
                </div>
            -->
        </form>
    </div>
    {% for visits, hash, status_code, url, normalized, nginx_activated in filedata %}
    <div class="row mt-2">
        <div class="col-11">
            <form method="post" class="row">
                <input class="form-control" type="hidden" name="action" value="edit">
                <input type="hidden" name="hash" value="{{ hash }}"/>
                <div class="col-3">
		{% if nginx_activated %}
		<a href="{{ url_for('edit', unlink_location=normalized, term=term, page=page) }}">{{ nginx_svg(15) }}</a>
		{% else %}
		<a href="{{ url_for('edit', link_location=normalized, term=term, page=page) }}">{{ nginx_svg(15, '#DDD') }}</a>
		{% endif %}
                    <a class="btn text-primary abtn ms-0 ps-0" href="/{{ hash }}" target="_blank">/{{ hash }}</a>
                </div>
                <div class="col-1 pe-0 me-0 btn" style="text-align:right;color:#999" title="Visits">
			{{ visits }} 
                </div>
                <div class="col-5">
                    <input class="form-control" type="url" name="url" value="{{ url }}"/>
                </div>
                <div class="col-1">
                    <select class="form-control" name="status_code">
                        <option value="301" {% if status_code == '301' %}selected="selected"{% endif %}>301</option>
                        <option value="302" {% if status_code == '302' %}selected="selected"{% endif %}>302</option>
                    </select>
                </div>
                <div class="col-2" style="text-align:right">
                    <input type="submit" value="Save" class="btn btn-secondary"/>
                    <input type="reset" value="Reset" class="btn btn-outline-secondary"/>
                </div>
            </form>
        </div>
        <div class="col-1">
            <form method="post" class="row" onsubmit="return confirm('{{ hash }} löschen?')">
                <div class="col-1">
                    <input type="hidden" name="action" value="delete"/>
                    <input type="hidden" name="hash" value="{{ hash }}"/>
                    <input type="submit" value="Delete" class="btn btn-outline-danger"/>
                </div>
            </form>
        </div>
    </div>
    {% endfor %}
    <div class="row mt-3 border-top pt-3">
        <div class="col-12" style="text-align: right">
            <span style="margin-right:10px;font-size:smaller;">
                <select onchange="location.href='{{ url_for('edit', term=term) }}&per_page=' + this.value"
                        style="width:auto !important;font-size:small;padding:2px 4px 2px 2px;text-align:right;background:transparent;border:0">
                {% for ps in pagesizes %}
                <option value="{{ ps }}" {% if ps== per_page %}selected="selected" {% endif %}>{{ ps }}</option>
                {% endfor %}
            </select>&nbsp;/&nbsp;Page
            {% if paginator[0] %}
            <a class="btn btn-outline btn-sm"
               href="{{ url_for('edit', page=paginator[1], term=term, per_page=per_page) }}">&nbsp;&lt;</a>
            {% if paginator[0][0] != 1 %}
            <a class="btn btn-outline-secondary btn-sm"
               href="{{ url_for('edit', page=1, term=term, per_page=per_page) }}">1</a>
            ...
            {% endif %}
            {% for page_num in paginator[0] %}
            {% if page_num == current_page %}
            <span class="btn btn-secondary btn-sm">{{ page_num }}</span>
            {% else %}
            <a class="btn btn-outline-secondary btn-sm"
               href="{{ url_for('edit', page=page_num, term=term, per_page=per_page) }}">{{
                page_num }}</a>
            {% endif %}
            {% endfor %}

            {% if paginator[0][-1] != total_pages %}
            ...
            <a class="btn btn-outline-secondary btn-sm"
               href="{{ url_for('edit', page=total_pages, term=term, per_page=per_page) }}">{{
                total_pages }}</a>
            {% endif %}
            <a class="btn btn-outline btn-sm"
               href="{{ url_for('edit', page=paginator[2], term=term, per_page=per_page) }}">&nbsp;&gt;</a>
            {% endif %}
        </div>
    </div>
</body>
</html>
