{% load materializecss %}
{% load static %}

<a class="waves-effect waves-light btn green lighten-1 modal-trigger" href="#modal-{{ name }}">{{ modal_title }}</a>

<div id="modal-{{ name }}" class="modal left-align">
    <form name="seller" action="{{ action }}" method="post" class="col s12" enctype="multipart/form-data">
        <div class="modal-content">
            <div class="row">
                {% if modal_title %}<h2 class="light" style="margin-top: 0;">{{ modal_title }}</h2>{% endif %}
                {% if modal_description %}<p>{{ modal_description }}</p>{% endif %}
                {% if form %}
                    {% csrf_token %}
                    {{ form|materializecss:'m6 s12' }}
                {% endif %}
            </div>
        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-close waves-effect waves-green btn-flat">Cancel</a>
            {% if form %}
                <button class="waves-effect waves-light btn green lighten-1" type="submit" name="{{ name }}">Submit</button>
            {% else %}
                <a href="#!" class="modal-close waves-effect green lighten-1 waves-green btn-flat">Ok</a>
            {% endif %}
        </div>
    </form>
</div>

{% block script %}
    <script>
        $(document).ready(function () {
            $('.modal').modal();
        });
    </script>
{% endblock %}