{% extends 'base_assets.html' %}
{% load widget_tweaks %}
{% load static %}

{% block css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'css/selects.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/easymde.min.css' %}">
{% endblock %}

{% block preload_js %}
    {{ block.super }}
    <script src="{% static 'js/selects.js' %}"></script>
    <script src="{% static 'js/easymde.min.js' %}"></script>
    <script src="{% static 'js/interaction.js' %}"></script>
{% endblock %}

{% block js %}
    {{ block.super }}
    <script src="{% static 'js/autocompleter.js' %}"></script>
    <script>
        const matches = window.matchMedia("(prefers-reduced-motion: reduce)").matches || window.matchMedia("(update: slow)").matches;
        dur = matches ? 0 : 500;
        function checkIfCableHidden() {
          if ($("#id_is_cable").prop('checked')) {
            $("#cable-table").slideDown(dur);
          } else {
            $("#cable-table").slideUp(dur);
          }
        }
        checkIfCableHidden();
    </script>
    <script>
        $('document').ready(function(){
            $(document).find(".selectpicker").selectpicker().each(function(){initPicker($(this))});
        });
    </script>
    <script>
        $(document).ready(function () {
            setupMDE('#id_comments');
        });
    </script>
{% endblock %}

{% block content %}
{% if duplicate %}
    <form method="POST" id="asset_update_form" action="{% url 'asset_duplicate' pk=previous_asset_id %}">
{% elif edit %}
    <form method="POST" id="asset_update_form" action="{% url 'asset_update' pk=object.asset_id %}">
{% else %}
    <form method="POST" id="asset_update_form" action="{% url 'asset_create' %}">
{% endif %}
        {% include 'form_errors.html' %}
        {% csrf_token %}
        <input type="hidden" name="id" value="{{ object.id|default:0 }}" hidden=true>
        <div class="row pt-2">
          <div class="col-sm-12">
            {% include 'partials/asset_detail_form.html' %}
          </div>
        </div>
        <div class="row pt-2">
          <div class="col-12 col-sm">
            {% include 'partials/purchasedetails_form.html' %}
          </div>
          <div class="col-12 col-sm-6 col-md-4" id="cable-table">
            {% include 'partials/cable_form.html' %}
          </div>
          <div class="col-12 col-md-4">
            {% include 'partials/parent_form.html' %}
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            {% include 'partials/asset_buttons.html' %}
          </div>
        </div>
    </form>
{% endblock %}