{% extends "base.html" %}

{% block body %}
<div class="row">
    <div class="col-12">
        <div class="card" style="margin:1rem; max-width:30rem;">
            <div class="card-header">
              Let's Customize!
            </div>
            <div class="card-body">
                <div class="image-card">
                    <img src="{{ url }}" class="card-img-top" alt="selected_img">
                </div>
                <div class="meme-form form-center">
                    <form action="/generate" method="GET">
                        <div class="row">
                            <div class="col-6">
                                <div class="input-line">Insert top text!<div class-'input-box'><input type="text" value="{{ top_text }}" name="top" /></div></div>
                                <div class-'input-box'><input type="hidden" value="{{ url }}" name="url" /></div>
                                <div class="input-line">Insert bot text!<div class-'input-box'><input type="text" value="{{ bot_text }}" name="bot" /></div></div>
                            </div>
                            <div class="col-6">
                                <input type="submit" value="Generate!" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
          </div>
    </div>
</div>
{% endblock %}