<div class="qmod-ui-tool qmod-vwapcalculator" rv-ifclass="tLang | = 'fr'" data-qmod-true-class="qmod-lang-fr"><h2 class="qmod-heading qmod-hbg">{'vwap calculator' | i8ln tLang}</h2><div class="qmod-tool-content" rv-unless="scope.nodata" rv-addclass="tLang | preFix 'qmod-lang-'"><div class="mdc-tab-bar" role="tablist"><div class="mdc-tab-scroller"><div class="mdc-tab-scroller__scroll-area"><div class="mdc-tab-scroller__scroll-content"><button class="mdc-tab" rv-each-tab="scope.tabs.list" rv-on-click="scope.tabs.clickTab" rv-id="'mdc-tab-' | postFixWord index" role="tab" rv-tabindex="index" rv-ifclass="index | = scope.tabs.selected" data-qmod-true-class="mdc-tab--active" rv-aria-selected="index | = scope.tabs.selected"><span class="mdc-tab__content"><span class="mdc-tab__text-label">{tab | i8ln tLang}</span></span><span class="mdc-tab-indicator" rv-ifclass="index | = scope.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-grid-section" rv-if="scope.lookup"><div class="qmod-symbol-input"><label class="qmod-label qmod-capitalize">{"enter symbol" | i8ln tLang}</label><smartlookup options="smartLookupOpts"></smartlookup></div></div><div class="qmod-datepickers qmod-grid" rv-show="scope.tabs.selected | = 0"><div class="qmod-grid-section"><div class="qmod-datepickers qmod-flex-row"><div class="qmod-datepicker"><label class="qmod-label">{'date' | i8ln tLang}</label><div class="inner-addon left-addon"><input id="vwapcalculator-datepicker-date" type="text" name="qmod-date" rv-class-qmod-disabled="scope.loading"/><i class="qmod-icon qm_icon-calendar-sld"></i></div></div></div></div><div class="qmod-grid-section"><div class="qmod-flex-row qmod-timepickers"><div class="qmod-timepicker"><label class="qmod-label qmod-capitalize">{'start time' | i8ln tLang}</label><div class="inner-addon left-addon"><input id="vwapcalculator-datepicker-time-start" type="text" name="qmod-start-time" placeholder="00:00:00"/><i class="qmod-icon qm_icon-clock-med"></i></div></div><div class="qmod-to qmod-capitalize">{'to' | i8ln tLang}</div><div class="qmod-timepicker"><label class="qmod-label qmod-capitalize">{'end time' | i8ln tLang}</label><div class="inner-addon left-addon"><input id="vwapcalculator-datepicker-time-end" type="text" name="qmod-end-time" placeholder="00:00:00"/><i class="qmod-icon qm_icon-clock-med"></i></div></div></div></div></div><div class="qmod-datepickers" rv-show="scope.tabs.selected | = 1"><div class="qmod-datepickers qmod-flex-row"><div class="qmod-datepicker"><label class="qmod-label qmod-capitalize">{'startdate' | i8ln tLang}</label><div class="inner-addon left-addon"><input id="vwapcalculator-datepicker-start-date" type="text" name="qmod-start-date" rv-placeholder="scope.startDate" rv-class-qmod-disabled="scope.loading"/><i class="qmod-icon qm_icon-calendar-sld"></i></div></div><div class="qmod-to qmod-capitalize">{'to' | i8ln tLang}</div><div class="qmod-datepicker"><label class="qmod-label qmod-capitalize">{'enddate' | i8ln tLang}</label><div class="inner-addon left-addon"><input id="vwapcalculator-datepicker-end-date" type="text" name="qmod-end-date" rv-placeholder="scope.endDate" rv-class-qmod-disabled="scope.loading"/><i class="qmod-icon qm_icon-calendar-sld"></i></div></div></div></div><div class="qmod-intraday-wrap" rv-if="scope.tabs.selected | = 0"><label class="qmod-label qmod-uppercase"><span class="qmod-text-primary">{'additional filters' | i8ln tLang}</span><button class="qmod-icon qmod-no-btn qm_icon-arrow-chevron-down2-med" rv-aria-expanded="scope.filters.open" rv-on-click="scope.filters.click" rv-ifclass="scope.filters.open" data-qmod-true-class="rotate-chevron-up" data-qmod-false-class="rotate-chevron-down"></button></label><hr/><div class="qmod-filters qmod-intraday-filters" rv-show="scope.filters.open"><div class="qmod-grid" id="vwapcalculator-trade-selects"><div class="qmod-grid-section"> <div class="qmod-flex-col" id="vwapcalculator-trade-size"><label class="qmod-label">{'min trade size' | i8ln tLang}</label><div class="inner-addon right-addon"> <input rv-value="scope.tradesize.value" type="text" rv-on-keypress="scope.tradesize.validate"/><i class="qmod-icon qm_icon-arrow-chevron-top-bld" rv-on-click="scope.tradesize.increase"></i><i class="qmod-icon qm_icon-arrow-chevron-down-bld" rv-on-click="scope.tradesize.decrease"></i></div></div></div><div class="qmod-grid-section"><div class="qmod-flex-col" id="vwapcalculator-trade-types"><label class="qmod-label">{'trade types' | i8ln tLang}</label><div class="qmod-a11y-dropdown2 qmod-tradetypes-dropdown"><div class="qmod-a11y-dropdown2-wrapper"><div class="qmod-a11y-dropdown2-combobox" rv-id="scope.tradetypes.id | postFix '-combo'" rv-aria-controls="scope.tradetypes.id | postFix '-listbox'" aria-haspopup="listbox" role="combobox" rv-on-keydown="scope.tradetypes.handleKeyDown" rv-aria-activedescendant="scope.tradetypes.id | postFix '-listbox-item-' | postFix scope.tradetypes.currentItem" rv-aria-expanded="scope.tradetypes.open" aria-labelledby="#vwapcalculator-adjustmenttype" tabindex="0" rv-on-click="scope.tradetypes.click" rv-on-blur="scope.tradetypes.blur"> <span>{scope.tradetypes.getSelectedLabel < selected}</span><i class="qmod-icon qm_icon-arrow-chevron-down2-med" aria-hidden="true" rv-ifclass="scope.tradetypes.open" data-qmod-true-class="rotate-chevron-up" data-qmod-false-class="rotate-chevron-down"></i></div><div class="qmod-a11y-dropdown2-listbox" role="listbox" rv-id="scope.tradetypes.id | postFix '-listbox'" tabindex="-1" aria-labelledby="#vwapcalculator-adjustmenttype" rv-show="scope.tradetypes.open"><div class="qmod-a11y-dropdown2-listbox-item" rv-id="scope.tradetypes.id | postFix '-listbox-item-' | postFix index" rv-each-tradetype="scope.tradetypes.list" role="option" rv-on-mousedown="scope.tradetypes.mousedown" rv-on-click="scope.tradetypes.change" rv-aria-selected="scope.tradetypes.selected|= index" rv-class-qmod-option-current="scope.tradetypes.currentItem|= index">{tradetype.label}</div></div></div></div></div></div></div><div class="qmod-flex-col" id="vwapcalculator-trade-ranges"><label class="qmod-label">{'trade ranges' | i8ln tLang}</label><div class="qmod-grid"><div class="qmod-grid-section"><div class="qmod-grid-row"><input class="qmod-chkrad" id="vwapcalculator-checkbox-buyside" type="checkbox" rv-checked="scope.buySideTrade"/><label class="qmod-chkradlabel" for="vwapcalculator-checkbox-buyside"> <span>{'buy-side trades' | i8ln tLang}</span></label></div><div class="qmod-grid-row"><input class="qmod-chkrad" id="vwapcalculator-checkbox-sellside" type="checkbox" rv-checked="scope.sellSideTrade"/><label class="qmod-chkradlabel" for="vwapcalculator-checkbox-sellside">{'sell-side trades' | i8ln tLang}</label></div></div><div class="qmod-grid-section"><div class="qmod-grid-row"><input class="qmod-chkrad" id="vwapcalculator-checkbox-inrange" type="checkbox" rv-checked="scope.inRangeTrade"/><label class="qmod-chkradlabel" for="vwapcalculator-checkbox-inrange">{'in-range trades' | i8ln tLang}</label></div><div class="qmod-grid-row"><input class="qmod-chkrad" id="vwapcalculator-checkbox-pricerange" type="checkbox" rv-checked="scope.priceRange.show"/><label class="qmod-chkradlabel" for="vwapcalculator-checkbox-pricerange">{'trade price range' | i8ln tLang}</label></div><div class="qmod-grid-row qmod-pricerange-inputs" rv-if="scope.priceRange.show"><label class="qmod-price-label" for="vwapcalculator-checkbox-minprice">{'min' | i8ln tLang}:</label><input id="vwapcalculator-checkbox-minprice" type="text" rv-value="scope.priceRange.min"/><label class="qmod-price-label" for="vwapcalculator-checkbox-maxprice">{'max' | i8ln tLang}:</label><input id="vwapcalculator-checkbox-maxprice" type="text" rv-value="scope.priceRange.max"/></div></div></div></div><div class="qmod-grid" id="vwapcalculator-broker-exchange"><div class="qmod-grid-section"> <div class="qmod-flex-row"><label class="qmod-label">{'broker id(s)' | i8ln tLang}:</label><i class="qm_icon-infotip-reg qmod-tooltip" rv-title="'multiple broker ids should be separated by commas' | i8ln tLang" rv-on-mouseenter="scope.qmtooltip" data-tipleave="mouseleave,touchleave,touchmove"></i><input id="vwapcalculator-broker-id" rv-value="scope.brokerId"/></div></div><div class="qmod-grid-section"><div class="qmod-flex-row"><label class="qmod-label">{'market' | i8ln tLang} / {'exchange' | i8ln tLang}:</label><i class="qm_icon-infotip-reg qmod-tooltip" rv-title="'multiple exchanges should be separated by commas' | i8ln tLang" rv-on-mouseenter="scope.qmtooltip" data-tipleave="mouseleave,touchleave,touchmove"></i><input id="vwapcalculator-exchange" rv-value="scope.exchange"/></div></div></div></div></div><div class="qmod-note" rv-if="scope.tabs.selected | = 1"> <div class="qmod-note-section">{'vwap date range data is' | i8ln tLang}</div><div class="qmod-note-section">{'eod vwap data available' | i8ln tLang}</div></div><div class="qmod-vwap-results qmod-grid" rv-show="scope.showResults"><div class="qmod-grid-section"><div class="qmod-symbol qmod-grid-row"><div class="qmod-label">{'symbol' | i8ln tLang}:</div><div class="qmod-value">{scope.results.symbol.symbolString}</div></div><div class="qmod-vwap qmod-grid-row"><div class="qmod-label">{'vwap' | i8ln tLang}:</div><div class="qmod-value">{scope.results.vwap | asQHLast tLang '&mdash;' true}</div></div></div><div class="qmod-grid-section"><div class="qmod-volume qmod-grid-row"><div class="qmod-label">{'volume' | i8ln tLang}:</div><div class="qmod-value">{scope.results.volume}</div></div><div class="qmod-period qmod-grid-row"><div class="qmod-label">{'period' | i8ln tLang}:</div><div class="qmod-value">{scope.results.date} {scope.results.from} {'to' | i8ln tLang} {scope.results.to}</div></div></div></div><div class="qmod-loader-class" rv-show="scope.loading"><div class="qmod-lds-ring"><div> </div><div> </div><div> </div><div> </div></div></div><div class="qmod-buttons"><button class="qmod-btn qmod-btn-secondary" id="vwapcalculator-clear" rv-if="scope.tabs.selected | = 0" rv-on-click="scope.clear"> <i class="qmod-icon qm_icon-arrow-refresh2-med" aria-hidden="true"></i><span class="qmod-btn-content">{'clear calculator' | i8ln tLang}</span></button><div class="qmod-export-buttons" rv-if="scope.exportEnabled"><button class="qmod-btn qmod-btn-secondary" id="vwapcalculator-export-intraday" rv-if="scope.tabs.selected | = 0" rv-on-click="scope.exportIntraday"><i class="qmod-icon qm_icon-download-med" aria-hidden="true"></i><span class="qmod-btn-content">{'export' | i8ln tLang}</span></button><button class="qmod-btn qmod-btn-secondary" id="vwapcalculator-export" rv-if="scope.tabs.selected | = 1" rv-on-click="scope.exportHistory"><i class="qmod-icon qm_icon-download-med" aria-hidden="true"></i><span class="qmod-btn-content">{'export' | i8ln tLang}</span></button></div><button class="qmod-btn qmod-btn-primary" id="vwapcalculator-calc" rv-on-click="scope.calcVWAP">{'calculate' | i8ln tLang}</button></div></div><div class="qmod-nodata"> <div class="qmod-msg qmod-msg-header">{error}</div></div><div class="qmod-error-modal" rv-if="scope.modal.show"><div class="qmod-modal-overlay"></div><div class="qmod-ui-modal" id="advcalculator-error-modal"><div class="qmod-ui-modal-body"><div class="qmod-modal-heading">{scope.error}</div></div><div class="qmod-ui-modal-footer"><button class="qmod-btn qmod-modal-ok" rv-on-click="scope.modal.close">{'ok' | i8ln tLang}</button></div></div></div><toast message="scope.toast.message" mode="scope.toast.mode" duration="scope.toast.duration"></toast></div>