{% load static %}
{% load bloomerp %}

<div id="{{item.id}}" type="{{item.type}}" class="col-12 col-md-{{item.size}} justify-content-between align-items-center workspace-item">
    <!--Script-->
    {{ item.data | json_script:item.id }}
    <!--End Script-->

    <!--Edit layout buttons-->
    <div class="item-settings-div d-none d-flex gap-2">
        <div class="dropdown open">
            <a 
                href="#"
                type="button"
                id="triggerId"
                data-bs-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
                >
                <img src="{% static 'bloomerp/icons/menu-dots.svg' %}" height="20" width="20" alt="menu" />
            </a>
            <div class="dropdown-menu" aria-labelledby="triggerId">
                <a class="dropdown-item pointer" onclick="moveItem(this, 'up')">Move up</a>
                <a class="dropdown-item pointer" onclick="moveItem(this, 'down')">Move down</a>
                <a class="dropdown-item pointer" onclick="deleteItem(this)">Delete</a>
                <li class="dropdown-item">
                    <input 
                        type="number" 
                        class="form-control form-control-sm" 
                        placeholder="Size"
                        max="12"
                        min="1" 
                        value="{{ item.size }}"
                        oninput="resizeItem('{{item.id}}', 'custom', this.value)"
                        />
                </li>
            </div>
        </div>
    </div>
    <!--End Edit layout buttons-->
    
    
    <!--Content-->    
    <div class="col-content my-2">
        {% if item.type == "header" %}
            <h3 class="card-title">{{ item.data.text }}</h3>
        {% elif item.type == "text" %}
            <div class="text-content-div">{{ item.data.text }}</div>
        {% elif item.type == "link" %}
            {% render_link item.data.link_id %}
        {% elif item.type == "link_list" %}
            {% for link_id in item.data.links %}
                <ul>
                    <li>{% render_link link_id %}</li>
                </ul>
            {% endfor %}
        {% elif item.type == "widget" %}
            <div 
                hx-get="{% url 'components_workspace_widget' %}?widget_id={{ item.data.widget_id }}"
                hx-trigger="load"
                hx-target="this"
                hx-swap="outerHTML"
                hx-indicator=".loading-indicator"
                >
                <div class="loading-indicator">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
    <!--End Content-->

</div>




