<div class="qmod-ui-tool qmod-tradingperformance"><h2 class="qmod-heading qmod-hbg">{'trading performance' | i8ln tLang}</h2><div class="qmod-tool-content"><div class="qmod-header-section qmod-section"><div class="qmod-company-name qmod-bold">{scope.longname}</div><div class="qmod-info-section-wrap"><div class="qmod-info-section"><div class="qmod-primary qmod-section-heading">{"primary" | i8ln tLang}</div><div class="qmod-primary-name qmod-bold">{scope.primary.marketMakerName}</div><div class="qmod-primary-phone"><i class="qmod-icon qm_icon-sector-communication-med" aria-hidden="true"></i><span>{scope.primary.phoneNumber}</span></div><div class="qmod-primary-email"> <i class="qmod-icon qm_icon-mail-med" aria-hidden="true"></i><span>{scope.primary.email}</span></div></div><div class="qmod-separator"></div><div class="qmod-info-section"><div class="qmod-secondary qmod-section-heading">{"secondary" | i8ln tLang}</div><div class="qmod-secondary-name qmod-bold">{scope.secondary.marketMakerName}</div><div class="qmod-secondary-phone"><i class="qmod-icon qm_icon-sector-communication-med" aria-hidden="true"></i><span>{scope.secondary.phoneNumber}</span></div><div class="qmod-secondary-email"><i class="qmod-icon qm_icon-mail-med" aria-hidden="true"></i><span>{scope.secondary.email}</span></div></div></div><div class="qmod-note"> <p>{"metrics are based on data from tsx feeds" | i8ln tLang}</p><p>{"For more information on market making" | i8ln tLang}</p></div></div><div class="qmod-charts-section qmod-section"> <div class="qmod-liquidity-profile qmod-chart-section"><h2 class="qmod-section-header">{"liquidity profile" | i8ln tLang}</h2><div id="tradingperformance-liquidity-chart"></div></div><div class="qmod-volatility-profile qmod-chart-section" rv-if="scope.overviewData.volatilityProfile"><h2 class="qmod-section-header">{"volatility profile" | i8ln tLang}</h2><div id="tradingperformance-volatility-chart"></div></div></div><div class="qmod-symbol-results qmod-section"><div class="qmod-modifiers"> <div class="qmod-label-wrap"><label class="qmod-label" id="tradeperformers-frequency-label">{"frequency" | i8ln tLang}</label><div class="qmod-a11y-dropdown2 qmod-frequency-dropdown"><div class="qmod-a11y-dropdown2-wrapper"><div class="qmod-a11y-dropdown2-combobox" rv-id="scope.binders.frequency.id | postFix '-combo'" rv-aria-controls="scope.binders.frequency.id | postFix '-listbox'" aria-haspopup="listbox" role="combobox" rv-on-keydown="scope.binders.frequency.handleKeyDown" rv-aria-activedescendant="scope.binders.frequency.id | postFix '-listbox-item-' | postFix scope.binders.frequency.currentItem" rv-aria-expanded="scope.binders.frequency.open" aria-labelledby="tradeperformers-frequency-label" tabindex="0" rv-on-click="scope.binders.frequency.click" rv-on-blur="scope.binders.frequency.blur"> <span>{scope.binders.frequency.getSelectedLabel < selected}</span><i class="qmod-icon qm_icon-arrow-chevron-down2-med"></i></div><div class="qmod-a11y-dropdown2-listbox" role="listbox" rv-id="scope.binders.frequency.id | postFix '-listbox'" tabindex="-1" aria-labelledby="tradeperformers-frequency-label" rv-show="scope.binders.frequency.open"><div class="qmod-a11y-dropdown2-listbox-item" rv-id="scope.binders.frequency.id | postFix '-listbox-item-' | postFix index" rv-each-item="scope.binders.frequency.list" role="option" rv-on-mousedown="scope.binders.frequency.mousedown" rv-on-click="scope.binders.frequency.change" rv-aria-selected="scope.binders.frequency.selected |= index" rv-class-qmod-option-current="scope.binders.frequency.currentItem |= index">{item.label}</div></div></div></div></div><div class="qmod-label-wrap"><label class="qmod-label">{"date" | i8ln tLang}</label><div class="inner-addon right-addon" rv-show="scope.binders.frequency.selected | = 0"><button class="qmod-no-btn qmod-icon qm_icon-calendar-sld duet-date__toggle"></button><duet-date-picker id="tradingperformance-date" rv-value="scope.date"></duet-date-picker></div><div class="inner-addon right-addon" rv-show="scope.binders.frequency.selected | = 1"><i class="qmod-icon qm_icon-calendar-sld" rv-on-click="scope.monthpicker.click"></i><input class="qmod-monthpicker" id="tradingperformance-month"/></div></div></div><div class="qmod-panel-body qmod-table-con" rv-if="scope.metrics" rv-hide="scope.loading"><table class="qmod-table qmod-metrics-table nowrap" width="100%"><thead><tr><th class="qmod-control qmod-th-0"></th><th class="qmod-textl qmod-th-1">{'metric' | i8ln tLang}</th><th class="qmod-textl qmod-th-2 qmod-textr">{'value' | i8ln tLang}</th></tr></thead><tbody><tr class="qmod-table-row" rv-each-metric="scope.metrics"><td class="qmod-td-0 qmod-control"></td><td class="qmod-textl qmod-td-1">{metric.name}</td><td class="qmod-textl qmod-td-2 qmod-textr">{metric.value}</td></tr></tbody></table></div><div class="mdc-tab-bar no-flex" role="tablist"><div class="mdc-tab-scroller"><div class="mdc-tab-scroller__scroll-area"><div class="mdc-tab-scroller__scroll-content no-flex"><button class="mdc-tab" rv-each-tab="scope.binders.tabs.list" rv-on-click="scope.binders.tabs.click" rv-id="'mdc-tab-' | postFixWord index" role="tab" rv-tabindex="index" rv-ifclass="index | = scope.binders.tabs.selected" data-qmod-true-class="mdc-tab--active" rv-aria-selected="index | = scope.binders.tabs.selected"><span class="mdc-tab__content"><span class="mdc-tab__text-label">{tab.label}</span></span><span class="mdc-tab-indicator" rv-ifclass="index | = scope.binders.tabs.selected" data-qmod-true-class="mdc-tab-indicator--active"> <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span></span><span class="mdc-tab__ripple mdc-ripple-upgraded"></span></button></div></div></div></div><div class="qmod-panel-body qmod-table-con" rv-if="scope.liquidity" rv-hide="scope.loading"><table class="qmod-table qmod-liquidity-table nowrap" width="100%" rv-if="scope.binders.tabs.selected | = 0"><thead><tr><th class="qmod-control qmod-th-0"></th><th class="qmod-textl qmod-th-1">{'rank' | i8ln tLang}</th><th class="qmod-textl qmod-th-2">{'firm' | i8ln tLang}</th><th class="qmod-textl qmod-th-3 qmod-textr">{'percentTimeAtNBBO' | i8ln tLang}</th><th class="qmod-textl qmod-th-4 qmod-textr">{'twapSpread' | i8ln tLang}</th><th class="qmod-textl qmod-th-5 qmod-textr">{'averageVolumeAtNBBO' | i8ln tLang}</th></tr></thead><tbody><tr class="qmod-table-row" rv-each-liquidity="scope.liquidity"><td class="qmod-td-0 qmod-control"></td><td class="qmod-textl qmod-td-1">{liquidity.rank}</td><td class="qmod-textl qmod-td-2">{liquidity.firm}</td><td class="qmod-textl qmod-td-3 qmod-textr">{liquidity.percentTimeAtNBBO}</td><td class="qmod-textl qmod-td-4 qmod-textr">{liquidity.twapSpread}</td><td class="qmod-textl qmod-td-5 qmod-textr">{liquidity.averageVolumeAtNBBO}</td></tr></tbody></table><table class="qmod-table qmod-liquidity-table nowrap" width="100%" rv-if="scope.binders.tabs.selected | = 1"><thead><tr><th class="qmod-control qmod-th-0"></th><th class="qmod-textl qmod-th-1">{'rank' | i8ln tLang}</th><th class="qmod-textl qmod-th-2">{'firm' | i8ln tLang}</th><th class="qmod-textl qmod-th-3 qmod-textr">{'buysTrades' | i8ln tLang}</th><th class="qmod-textl qmod-th-4 qmod-textr">{'sellsTrades' | i8ln tLang}</th><th class="qmod-textl qmod-th-5 qmod-textr">{'buysVolume' | i8ln tLang}</th><th class="qmod-textl qmod-th-6 qmod-textr">{'sellsVolume' | i8ln tLang}</th></tr></thead><tbody><tr class="qmod-table-row" rv-each-liquidity="scope.liquidity"><td class="qmod-td-0 qmod-control"></td><td class="qmod-textl qmod-td-1">{liquidity.rank}</td><td class="qmod-textl qmod-td-2">{liquidity.firm}</td><td class="qmod-textl qmod-td-3 qmod-textr">{liquidity.buysTrades}</td><td class="qmod-textl qmod-td-4 qmod-textr">{liquidity.sellsTrades}</td><td class="qmod-textl qmod-td-5 qmod-textr">{liquidity.buysVolume}</td><td class="qmod-textl qmod-td-6 qmod-textr">{liquidity.sellsVolume}</td></tr></tbody></table></div></div></div></div>