{% extends "stylist/base.html" %}
{% load crispy_forms_tags %}

{% block title %}Stylist - Home{% endblock %}

{% block content %}
<div class="container">
    <div class="row mb-4 align-items-center">
        <div class="col">
            <h1> Themes </h1>
        </div>
        <div class="col text-right">
            Active Theme: <b> {{ active_theme.name }} </b>
            <a class="btn btn-primary text-light ml-2" data-toggle="modal" data-target="#form_modal" href="{% url 'stylist:stylist-make-active' %}"> Change </a>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <h3>Available Themes</h3>
            <p> Edit, preview, and create new design themes for your site. </p>
            <ul>
                {% for style in object_list %}
                <li>
                    <a href="{{style.get_absolute_url}}">Edit {{ style.name }}</a>
                    <ul>
                        <li>
                            <a href="{% url 'stylist:stylist-delete' style.uuid %}" data-toggle="modal" data-target="#form_modal"> Delete </a>
                        </li>
                        <li>
                            <form method="POST" id="preview-form-{{style.id}}" action="{% url 'stylist:stylist-preview' style.uuid %}" target="_blank">
                                {% csrf_token %}
                                <input type="hidden" name="name" value="{{style.name}}">
                                {% for key, value in style.attrs.items %}
                                <input type="hidden" name="{{key}}" value="{{value}}">
                                {% endfor %}
                                <a href="#" onClick="document.getElementById('preview-form-{{style.id}}').submit();"> Preview </a>
                            </form>
                        </li>
                        <li>
                            <form method="POST" id="duplicate-form-{{style.id}}" action="{% url 'api-duplicate-style' style.uuid %}">
                                {% csrf_token %}
                                {{ form.name.as_hidden }}
                                {{ form.enabled.as_hidden }}
                                <a href="#" onClick="document.getElementById('duplicate-form-{{style.id}}').submit();"> Duplicate </a>
                            </form>
                        </li>
                    </ul>
                </li>
                {% endfor %}
            </ul>

            <form method="POST" action="{% url 'api-create-style' %}">
                {% csrf_token %}
                {{ form.name.as_hidden }}
                {{ form.enabled.as_hidden }}
                <input type="submit" value="New Theme" class="btn btn-primary text-light"></input>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="form_modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
	    
        </div>
    </div>
</div>


{% endblock %}


{% block extra_js %}
<script>
    $(document).ready(function() {

        $('#form_modal').on('show.bs.modal', function (evt) {
            var modal = $(this).find('.modal-content');
            var url = evt.relatedTarget.href; {% comment %}// pull form contents from href attr of button{% endcomment %}
            $.ajax({
                url: url,
                context: document.body
            }).done(function(response) {
                modal.html(response);
            });
        });

    });
</script>
{% endblock %}
