{% extends "lens/base.html" %}

{% block head:title %}Settings{% endblock %}

{% block content %}
<div class="bg-white shadow-lg rounded overflow-hidden">
    <div class="py-3 px-6 bg-green-800 text-white font-semibold">
        Settings
    </div>
    <dl class="text-sm">
        <div class="px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-3 sm:px-6">
            <dt class="font-medium text-gray-500">
                Record Requests
            </dt>
            <dd class="mt-1 text-gray-900 sm:mt-0 sm:col-span-2">
                <form action="{% url 'lens:settings' %}" method="POST">
                    <input type="hidden" name="enabled" value="{{ trace_setting.enabled|yesno:'no,yes' }}">
                    {% csrf_token %}
                    <button type="submit" class="bg-green-900 p-2 rounded hover:bg-green-800 text-green-50 shadow-lg" title="{{ trace_setting.enabled|yesno:'Pause recording,Resume recording' }}">
                        {% if trace_setting.enabled %}
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg> Pause Recording
                        {% else %}
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg> Resume Recording
                        {% endif %}
                    </button>
                </form>
            </dd>
        </div>
        <div class="px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-3 sm:px-6">
            <dt class="font-medium text-gray-500">
                Stacktrace // TODO: MAKE IT WORK
            </dt>
            <dd class="mt-1 text-gray-900 sm:mt-0 sm:col-span-2">
                <form action="{% url 'lens:settings' %}" method="POST">
                    <input type="hidden" name="stacktrace_enabled" value="{{ trace_setting.stacktrace_enabled|yesno:'no,yes' }}">
                    {% csrf_token %}
                    <button type="submit" class="bg-green-900 p-2 rounded hover:bg-green-800 text-green-50 shadow-lg" title="{{ trace_setting.enabled|yesno:'Disable Stacktrace,Enable Stacktrace' }}">
                        <svg class="h-6 w-6 inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
                        {{ trace_setting.stacktrace_enabled|yesno:'Disable Stacktrace,Enable Stacktrace' }}
                    </button>
                </form>
            </dd>
        </div>
        <div class="px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-3 sm:px-6">
            <dt class="font-medium text-gray-500">
                Delete Requests
            </dt>
            <dd class="mt-1 text-gray-900 sm:mt-0 sm:col-span-2">
                <form action="{% url 'lens:delete_trace' 'all' %}" method="POST" onsubmit="return confirm('Are you sure you want to delete ALL requests?')">
                    {% csrf_token %}
                    <button type="submit" class="bg-green-900 p-2 rounded hover:bg-green-800 text-green-50 shadow-lg" title="Delete traces">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg> Delete Requests
                    </button>
                </form>
            </dd>
        </div>
    </dl>
</div>

{% endblock %}