{% extends 'booru/base_admin.html' %}

{% block css %}
    {% load staticfiles %}
{% endblock %}

{% block scripts %}
<script>
    $( document ).ready(function() {
        $('#id_filter_by').on('input', function() {
            $('#mass_rename_filter_by').text($(this).val());
        });
        $('#id_when').on('input', function() {
            $('#mass_rename_when').text($(this).val());
        });
        $('#id_replace_with').on('input', function() {
            $('#mass_rename_replace_with').text($(this).val());
        });
    });
</script>
{% endblock %}

{% block content %}
<div class="col-12 text-white bg-primary">
    <h1 class="h4 text-uppercase p-3 mb-0"><i class="fas fa-chart-line mr-3"></i>Mass Rename</h1>
</div>

<div class="col bg-white align-middle mt-3 pl-4 pt-3 pb-3 pr-4">
    <h1>Find and replace tags</h1>

    <p>
        Everytime there is "<span id="mass_rename_filter_by" class="font-weight-bold"></span>", 
        replace "<span id="mass_rename_when" class="font-weight-bold"></span>" 
        with "<span id="mass_rename_replace_with" class="font-weight-bold"></span>".
    </p>
    <p class="text-muted">
        Note: "When" also filters when searching. If "Filter by" is empty, it will search for all (with "When" filtering).
    </p>

    <form method="post" enctype="multipart/x-www-form-urlencoded">
        {% csrf_token %}
        {% for field in form %}
        <div class="form-group">
            <label for="{{field.auto_id}}">{{ field.label }}</label>
            {{ field }}
        </div>
        {% endfor %}
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>    
</div>
{% endblock %}