<?xml version="1.0"?>
<t t-name="web.config_speedscope_index">
        <link rel="stylesheet" href="/web/assets/any/web.assets_web.min.css"/>
        <script src="/web/assets/any/web.assets_web.min.js" type="text/javascript"/>
        
        <div class="container-md p-0">
            <div class="o_form_view" style="align-items: center;">
                <div class="o_form_sheet">
                    <!-- Single Form -->
                    <form id="dynamicForm" method="get" t-attf-action="/web/speedscope/{{profile_str}}">
                        <h4>Options</h4>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="constant_time" name="constant_time" value="True"/>
                            <label class="form-check-label" for="constant_time">Constant Time</label>
                        </div>
                        <!-- add more variable here -->
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="aggregate_sql" name="aggregate_sql" value="True"/>
                            <label class="form-check-label" for="aggregate_sql">Aggregate SQL</label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="use_execution_context" name="use_execution_context" value="True" checked="1"/>
                            <label class="form-check-label" for="use_execution_context">Use execution context</label>
                        </div>
                        <div t-if="len(profiles) &gt; 1">
                        <hr/>
                        <h4>Multiple profile</h4>
                            <label class="form-check-label" for="profile_aggregation_mode">Aggregation mode</label>
                            <select class="form-select" name="profile_aggregation_mode" id="profile_aggregation_mode">
                                <option value="tabs">Separated (one per tab)</option>
                                <option value="temporal">Temporal (experimental)</option>
                            </select>
                            <span id="temporal_warning" class="alert alert-warning" style="display:none"><b>Warning:</b> Temporal mode will merge all samples.<br/>It can lead to partially invalid result in case of concurrent profiles.<br/>Use with caution </span>
                            <script>
                                document.getElementById('profile_aggregation_mode').addEventListener('change', function (event) {
                                    document.getElementById('temporal_warning').style.display = event.target.value === 'temporal'? 'block': 'none';
                                });
                            </script>

                        </div>
                        <hr/>
                        <h4>Display presets</h4>
                        <div class="form-check" t-if="any((profile.sql and profile.traces_async) for profile in profiles)">
                            <input type="checkbox" class="form-check-input" id="combined_profile" name="combined_profile" value="True" checked="checked"/>
                            <label class="form-check-label" for="combined_profile">Frames + sql (Combined)</label>
                        </div>
                        <div class="form-check" t-if="any(profile.sql for profile in profiles)">
                            <input type="checkbox" class="form-check-input" id="sql_no_gap_profile" name="sql_no_gap_profile" value="True" checked="checked"/>
                            <label class="form-check-label" for="sql_no_gap_profile">SQL no gap</label>
                        </div>
                        <div class="form-check" t-if="any(profile.sql for profile in profiles)">
                            <input type="checkbox" class="form-check-input" id="sql_density_profile" name="sql_density_profile" value="True"/>
                            <label class="form-check-label" for="sql_density_profile">SQL density</label>
                        </div>
                        <div class="form-check" t-if="any(profile.traces_async for profile in profiles)">
                            <input type="checkbox" class="form-check-input" id="frames_profile" name="frames_profile" value="True"/>
                            <label class="form-check-label" for="frames_profile">Frames</label>
                        </div>

                        <input type="hidden" name="profile_id" t-att-value="profile_str"/>
                        
                        <div class="mt-3">
                            <button type="submit" class="btn btn-secondary" name="action" value="download_json"><i class="fa fa-download"/> (json)</button>
                            <button type="submit" class="btn btn-secondary" name="action" value="download_html"><i class="fa fa-download"/> (html)</button>
                            <button type="submit" class="btn btn-primary" name="action" value="open">Open</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </t>
