{% macro boolean(id,value) %}
        <input class="form-check-input" id="{{ id }}" type="checkbox" disabled {% if value %}checked{% endif %}>
        {% endmacro %}

        {% macro checkbox(id,options, value) %}
        {% if options is string %}
            {% set options = options|from_json %}
            {% for label, checkvalue in options.items() %}
            <div class="form-check" id="{{ id }}">
                <input class="form-check-input" type="checkbox" value="{{ checkvalue }}" disabled>
                <label class="form-check-label" >
                    {{ label }}
                </label>
            </div>
            {% endfor %}
        {% endif %}
        {% endmacro %}

        {% macro radio(id,options, value) %}
        {% for label, checkvalue in options.items() %}
        <div class="form-check" id="{{ id }}">
            <input class="form-check-input" type="radio" value="{{ checkvalue }}"{% if checkvalue == value %} checked {% endif %} disabled>
            <label class="form-check-label" >
                {{ label }}
            </label>
        </div>
        {% endfor %}
        {% endmacro %}

        {% macro money(id, value) %}
        <p id="{{ id }}">{% if value %}{{ value | money_format }}{% endif %}</p>
        {% endmacro %}

        {% macro number(id, value) %}
        <p id="{{ id }}">{% if value %}{{ value }}{%  endif %}</p>
        {% endmacro %}

        {% macro integer(id, value) %}
        <p id="{{ id }}">{% if value %}{{ value }}{%  endif %}</p>
        {% endmacro %}

        {% macro textarea(id, value) %}
        <div id="{{ id }}">{% if value %}{{ value | safe}}  {%  endif %}</div>
        {% endmacro %}

        {% macro select(id,options,value) %}
        {% if options is string %}
            {% set options = options|from_json %}
            {% for label, valueOption in options.items() %}
                {% if value == valueOption %} 
                    <p id="{{ id }}">{{ label }}</p>
                {% endif %}
            {% endfor %}
        {% endif %}
        {% endmacro %}

        {% macro connected_table(id, connected_table, value) %}
        {% if value %}
        <a href="{{ url_for('routing.view_record', classid=connected_table, record_id=value.id) }}">{{ value }}</a>
        {% endif %}
        {% endmacro %}

        {% macro treeView(id, connected_table, value) %}
        <div class="tags-input">
            {% for tag in value %}
                <a href="{{ url_for('routing.view_record', classid=connected_table, record_id=tag.id) }}">{{ tag.name }}</a> ,
            {% endfor %}
        </div>
        {% endmacro %}

        {% macro tagsInput(id, connected_table, value) %}
        <div class="tags-input">
            {% for tag in value %}
                <a href="{{ url_for('routing.view_record', classid=connected_table, record_id=tag.id) }}">{{ tag.name }}</a> ,
            {% endfor %}
        </div>
        {% endmacro %}

        {% macro date(id,value) %}
        <p id="{{ id }}">{% if value %} {{ value.strftime('%d/%m/%Y') }} {% endif %}</p>
        {% endmacro %}

        {% macro incompletedate(id,value) %}
        <p id="{{ id }}">
            {% if value %}
            {%set format = value | format_incomplete_date%}
            {{format[2]}}/{{format[1]}}/{{format[0]}}
            {% endif %}
        </p>
        {% endmacro %}

        {% macro image(id, value) %}
            {% if value%}
            <a href="javascript:void(0)" onclick="openLightbox{{id}}('{{ url_for('application.get_blob_read', blob_id=value.id) }}')"style="display: inline-flex;">
                <img id="img-preview-{{id}}" 
                    src="{{ url_for('application.get_thumbnail', blob_id=value.id) }}" 
                    style="max-width:200px; max-height:200px; display:block; margin-bottom:10px;" />
            </a>
            <a href="{{ url_for('application.get_blob_read', blob_id=value.id) }}" target="_blank" class="" id="download-image-btn-{{id}}">
                <span class="material-icons align-middle">open_in_new</span>
            </a>

            <!-- Lightbox (único por {{id}}) -->
            <div id="lightbox-{{id}}" style="
                display:none;
                position:fixed;
                top:0; left:0; width:100%; height:100%;
                background:rgba(0,0,0,0.8);
                justify-content:center;
                align-items:center;
                z-index:1000;
            ">
                <span onclick="closeLightbox{{id}}()" style="
                    position:absolute;
                    top:20px; right:30px;
                    color:white; font-size:40px; cursor:pointer;
                ">&times;</span>
                <img id="lightbox-img-{{id}}" src="" style="max-width:90%; max-height:90%; border-radius:8px;">
            </div>

            <script>
                function openLightbox{{id}}(src) {
                    document.getElementById("lightbox-img-{{id}}").src = src;
                    document.getElementById("lightbox-{{id}}").style.display = "flex";
                }
                function closeLightbox{{id}}() {
                    document.getElementById("lightbox-{{id}}").style.display = "none";
                }
            </script>
            {% endif %}
        {% endmacro %}

        {% macro imageExport(id, value) %}
            {% if value%}
                <img id="img-preview-{{id}}" 
                    src="{{ url_for('application.get_thumbnail', blob_id=value.id) }}" 
                    style="max-width:200px; max-height:200px; display:block; margin-bottom:10px;" />

            {% endif %}
        {% endmacro %}

        {% macro blob(id, value) %}
        <!-- Input para subir una nueva imagen, solo se muestra si el usuario selecciona eliminar la imagen actual -->
        {% if value%}
            <a href="{{url_for('application.get_blob_read', blob_id=value.id) }}" style="display: inline-flex;">    <img id="img-preview-{{id}}" 
                    src="{{ url_for('application.get_thumbnail', blob_id=value.id) }}" 
                    style="max-width:200px; max-height:200px; display:block; margin-bottom:10px;" /></a>
            <a href="{{ url_for('application.get_blob_read', blob_id=value.id) }}" target="_blank" class="btn btn-light btn-sm" id="download-image-btn-{{id}}">
                <span class="material-icons align-middle">open_in_new</span>
            </a>

        {% endif %}
        {% endmacro %}

        {% macro email(id, value) %}
        <p id="{{ id }}">{% if value %}{{ value }}{%  endif %}</p>
        {% endmacro %}

        {% macro default(id, value) %}
        <p id="{{ id }}">{% if value %}{{ value }}{%  endif %}</p>
        {% endmacro %}