{%- with card_id = feature.name + '-' + metric.name if feature else metric.name -%}
<div class="col-md-{% if 'full_width' in metric %}12{% else %}6{% endif %} mb-5" >
    <a name="{{ card_id }}"></a>
    <div class="card shadow-sm">
        <div class="card-body" id="{{ card_id }}-card">
            <h4 class="card-title">{{metric.name | fmt_metric}}</h4>
                {%- if metric.description | length -%}
                <p class="card-text">
                    {{metric.description}}
                </p>
                {%- endif -%}
        </div>
        <div id="{{ card_id }}"> </div>
        {%- if metric.type in ['traffic_light', 'alert'] -%}
            {{ metric.plot }}
        {%- else -%}
            <div class="skeleton-loader" id="{{ card_id }}-loading"></div>
            <script>
            rendered["{{ card_id }}"] = false;
            render_func["{{ card_id }}"] = (function(){
                var layout = deepCopy(layouts["{{ section_index }}{{ curr }}-{{ metric.type }}"]);
                {%- if metric.shapes | length -%}
                    layout["shapes"] = {{ metric.shapes | json_plot}};
                {%- endif -%}
                {%- if metric.yaxis_range | length -%}
                    layout["yaxis"]["range"] = {{ metric.yaxis_range | json_plot }};
                {%- endif -%}
                Plotly.newPlot(document.getElementById("{{ card_id }}"), {{ metric.plot | json_plot }}, layout, plotly_config).then(function() { document.getElementById("{{ card_id }}-loading").remove(); rendered["{{ card_id }}"] = true;});
            });

            var io = new IntersectionObserver(function(entries) {
                var entry = entries[0];
                if(entry.isIntersecting === true && rendered["{{ card_id }}"] === false){
                    if(document.readyState === "complete"){
                        render_func["{{ card_id }}"]();
                        io.unobserve(entry.target);
                    }else{
                        document.addEventListener('DOMContentLoaded', function() {
                            render_func["{{ card_id }}"]();
                            io.unobserve(entry.target);
                        });
                    }
                }
            }, { threshold: [0] });
            io.observe(document.getElementById("{{ card_id }}-card").parentNode.parentNode);
            </script>
        {%- endif -%}
    </div>
</div>
{%- endwith -%}