{% extends 'tom_common/base.html' %}
{% load bootstrap4 targets_extras crispy_forms_tags %}
{% block title %}New Target{% endblock %}
{% block content %}
{% if not object %}
  <h3>Create a Target</h3>
  <ul class="nav nav-tabs mb-2">
    {% for k, v in type_choices %}
      <li class="nav-item">
        <a class="nav-link {% if form.type.initial == k %} active {% endif %}" href="{% url 'targets:create' %}?type={{ k }}">{{ v  }}</a>
      </li>
    {% endfor %}
{% else %}
<h3> Update {{ object.name }}</h3>
{% endif %}
</ul>
{% bootstrap_form_errors form %}
<form method="post" class="form">
{% csrf_token %}
{% bootstrap_field form.type %}
<div class="form-row">
    <div class="col">
        {% bootstrap_field form.name size="large" show_help=False %}
    </div>
</div>
<div class="row" x-data="{open: false}">
    <div class="col mb-2">
        <span @click="open = ! open" class="text-primary pointer" x-text="open ? '▾ Aliases' : '▸ Aliases'"></span>
        <div x-show="open" class="border p-3 bg-light" x-transition>
            {% bootstrap_formset_errors names_form %}
            {% bootstrap_formset names_form %}
        </div>
    </div>
</div>
<div class="row" x-data="{open: false}">
    <div class="col mb-2">
        <span @click="open = ! open" class="text-primary pointer" x-text="open ? '▾ Tags' : '▸ Tags'"></span>
        <div x-show="open" class="border p-3 bg-light" x-transition>
            {% bootstrap_formset_errors extra_form %}
            {% bootstrap_formset extra_form %}
        </div>
    </div>
</div>
{% crispy form %}
<h4>Permissions</h4>
<div class="row mb-3" x-data="{permission: '{{ form.permissions.value }}' }">
    <div class="col-md-6">
        <select x-model="permission" name="permissions" class="form-control" id="id_permissions">
          <option value="OPEN">Open</option>
          <option value="PUBLIC">Public</option>
          <option value="PRIVATE">Private</option>
        </select>
        <div class="form-text text-muted">
          <small>Open: Targets will be visible to all users, even if not logged-in.<br/>
          Public: Targets will be visible to all logged in users.<br/>
          Private: Targets will be visible only to members of the selected groups.</small>
        </div>
    </div>
    <div class="col-md-6">
        <div x-show="permission == 'PRIVATE'" x-transition>
            <span>Target will only be visibile to members of these groups:</span>
            {% bootstrap_field form.groups show_label=False %}
            {% if not request.user.groups.exists %}
                <p class="text-muted">No groups have been created.<br/>
                  <a href="{% url 'group-create' %}">Create groups.</a>
                </p>
            {% endif %}
        </div>
    </div>
</div>
  {% if not object %}
  <button type="submit" formaction="{% url 'targets:create' %}" class="btn btn-primary">Submit</button>
  {% else %}
  <button type="submit" formaction="{% url 'targets:update' pk=object.id %}" class="btn btn-primary">Save</button>
  <a href="{% url 'targets:detail' pk=object.id %}" class="btn btn-primary" title="Back">Back</a>
  {% endif %}
</form>
{% endblock %}