<div class="qmod-ui-tool qmod-investment-calculator"><h2 class="qmod-hbg qmod-heading">{tplLang.investmentcalculator| toLang tLang}</h2><div class="qmod-error-msg"></div><div class="qmod-block-wrapper"><div class="qmod-non-modal-chart" rv-unless="scope.modal"><div class="qmod-pricehistory-chart-con"><div class="qmod-pricehistory-chart"><div class="phistory-chart"></div></div></div></div><div rv-ifclass="scope.modal" data-qmod-false-class="qmod-no-modal"><div class="qmood-symbol-input" rv-unless="scope.hideSymbolInput"><div rv-unless="scope.mulptipleSymbols"><label>{tplLang.symbol| toLang tLang}:</label><input rv-on-focus="scope.binders.addSymbol" rv-value="scope.mySymbol" type="text"/></div><div rv-if="scope.mulptipleSymbols"><label>{tplLang.symbol| toLang tLang}:</label><select class="qmod-symbol-select" rv-value="scope.mySymbol"><option rv-each-symbol="scope.symbolsList">{symbol}</option></select></div></div><div class="qmod-calendar-control"><div class="inner-addon right-addon"><label>{tplLang.investmentdate| toLang tLang}:</label><i class="fa fa-calendar"></i><input class="qmod-datepicker" type="text" name="qmod-fromdate" rv-value="scope.fromdate"/></div></div><div class="qmod-checkbox-inline"><span>{tplLang.initialinvestment| toLang tLang}:</span><input class="qmod-chkrad" id="qmod-amount" type="radio" name="qmod-investment-amount-type" value="amount" checked="checked"/><label class="qmod-chkradlabel" for="qmod-amount">{tplLang.amount| toLang tLang}</label><input class="qmod-chkrad" id="qmod-numShares" type="radio" name="qmod-investment-amount-type" value="shares"/><label class="qmod-chkradlabel" for="qmod-numShares">{tplLang.numshares| toLang tLang}</label></div><input type="number" id="qmod-investment-amount"/><div class="qmod-adjr"><input class="qmod-chkrad qmod-checkradboxright" id="qmod-reinvest" type="checkbox" rv-value="scope.reinvest" rv-ifclass="tLang |= 'fr' | log" data-qmod-true-class="qmod-checkrad-fr"/><label class="qmod-chkradlabel" for="qmod-reinvest">{tplLang.reinvest| toLang tLang}:</label><button class="qmod-btn qmod-btn-sm qmod-btn-go qmod-darkblue qmod-calculate" rv-on-click="scope.calculate"><div rv-if="scope.loading"><div class="qmod-textl">{tplLang.calculating| toLang tLang}</div><div class="loader"></div></div><div rv-unless="scope.loading">{tplLang.calculate| toLang tLang}</div></button></div></div><div class="qmod-no-modal" rv-unless="scope.modal"><div class="qmod-roi-info" rv-if="scope.showing | ='roi'"><div class="qmod-investment-results"><div class="qmod-initial-investment-headers"><div class="pure-u-1-4">{tplLang.investmentdate| toLang tLang}</div><div class="pure-u-1-4">{tplLang.originalshares| toLang tLang}</div><div class="pure-u-1-4">{tplLang.originalprice| toLang tLang}</div><div class="pure-u-1-4">{tplLang.originalvalue| toLang tLang}</div></div><div class="qmod-initial-investment-values"><div rv-unless="scope.initializing"><div class="pure-u-1-4">{scope.investmentDateDisplay}</div><div class="pure-u-1-4">{scope.originalShares  | numeraljs '0,0' '0' tLang}</div><div class="pure-u-1-4">{scope.investmentPrice | numeraljs '0,0.00[000]' '0.00[000]' tLang}</div><div class="pure-u-1-4">{scope.originalValue | numeraljs '0,0.00' '0.00' tLang}</div></div></div><div class="qmod-final-investment-headers"><div class="pure-u-1-4">{tplLang.currentdate | toLang tLang}</div><div class="pure-u-1-4">{tplLang.currentshares | toLang tLang}</div><div class="pure-u-1-4">{tplLang.currentprice | toLang tLang}</div><div class="pure-u-1-4">{tplLang.currentvalue | toLang tLang}</div></div><div class="qmod-final-investment-values"><div rv-unless="scope.initializing"><div class="pure-u-1-4">{scope.currentDateDisplay}</div><div class="pure-u-1-4">{scope.currentShares | numeraljs '0,0.[0000]' '0.[0000]' tLang}</div><div class="pure-u-1-4">{scope.currentPrice | numeraljs '0,0.00[000]' '0.00[000]' tLang}</div><div class="pure-u-1-4">{scope.currentValue | numeraljs '0,0.00' '0.00' tLang}</div></div></div></div><div class="qmod-no-data-today" rv-unless="scope.lastcloseshowing" rv-hide="scope.initializing">*{tplLang.nodateavailablefortoday| toLang tLang}</div></div><div class="qmod-roi-info" rv-if="scope.showing | ='splits'"><div class="qmod-splits"><div class="qmod-split" rv-each-split="scope.splits"><div class="pure-u-1-2">{tplLang.date | toLang tLang}: {split.date | momentjs 'true' 'LL'}</div><div class="pure-u-1-2">{tplLang.splitraio | toLang tLang}: {split.splitratio}</div></div></div></div><div class="qmod-roi-info" rv-if="scope.showing | ='dividends'"><div class="qmod-dividend"><div class="qmod-split" rv-each-dividend="scope.dividendsHTML"><div rv-html="dividend"></div></div></div></div><div class="pure-u-sm-1-2"><div class="qmod-roi"><div>{tplLang.sharesappreciation | toLang tLang} = {scope.roi | numeraljs '0,0.00' '0.00' tLang}%</div><div>{tplLang.dividendspaidincash | toLang tLang} = ${scope.payout | numeraljs '0,0.00' '0.00' tLang}</div></div></div><div class="pure-u-sm-1-2 qmod-textr" rv-if="scope.showing | ='roi'"><button class="qmod-btn qmod-btn-sm qmod-btn-go qmod-darkblue qmod-splits-btn" rv-show="scope.hasSplits" rv-on-click="scope.showSplits">Splits Info</button><button class="qmod-btn qmod-btn-sm qmod-btn-go qmod-darkblue qmod-dividens-btn" rv-show="scope.hasDividends" rv-on-click="scope.showDividends">Dividends Info</button></div><div class="pure-u-sm-1-2 qmod-textr" rv-unless="scope.showing | ='roi'"><button class="qmod-btn qmod-btn-sm qmod-btn-go qmod-darkblue" rv-on-click="scope.showRoi">{tplLang.back | toLang tLang}</button></div></div><div class="qmod-popup-wrapper qmod-symbollookup-modal" rv-show="scope.symbollookupmodal.show"><div class="pop-up-middle"><div class="qmod-popup"><div class="qmod-popup-title">{tplLang.choosesymbol | toLang tLang}<div class="qmod-popup-titlebar-buttons"><button class="qmod-btn" rv-on-click="scope.symbollookupmodal.close">&times;</button></div></div><div class="qmod-popup-body"><div class="qmod-symbol-lookup"><span class="qmod-symbol-lookup-input"><input class="qmod-symbollookup" type="text" rv-placeholder="tplLang.enteranameorsymbol | toLang tLang" rv-on-input="scope.smartlookup.doLookup" rv-on-focus="scope.smartlookup.doLookup" rv-on-click="scope.smartlookup.doLookup" rv-value="scope.smartlookup.symbollookupvalue"/></span><span class="qmod-symbol-lookup-btn"><btn class="qmod-btn qmod-darkblue" rv-on-click="scope.lookupCallback">{tplLang.add | toLang tLang}</btn></span><span class="qmod-invalid-symbol" rv-show="scope.invalid">{tplLang.invalidsymbol | toLang tLang}</span></div></div><div class="qmod-smartlookup-results qmod-tool-wrap" rv-on-mouseenter="scope.smartlookup.closeLookupTimer" rv-on-mouseleave="scope.smartlookup.closeLookup"><ul class="qmod-tab-views qmod-tab-row"><li class="qmod-tab" rv-each-result="scope.smartlookup.result | groupby 'symbolType' | propertyList" rv-on-click="scope.smartlookup.switchResultsTab" rv-class-qmod-tab-active="scope.smartlookup.activeResultTab | = result.key">{result.key}</li><li class="qmod-sersel qmod-textr"><span class="qmod-searchby">{tplLang.searchby | toLang tLang}</span><label class="qmod-label qmod-searchby-name" for="qmod-search-by-name" rv-class-qmod-active="scope.smartlookup.searchByName">{tplLang.name| toLang tLang}<input type="radio" id="qmod-search-by-name" name="search-by" value="name" rv-checked="scope.smartlookup.searchByName" rv-on-change="scope.smartlookup.changeSearchBy"/></label><label class="qmod-label qmod-searchby-symbol" for="qmod-search-by-symbol" rv-class-qmod-active="scope.smartlookup.searchBySymbol">{tplLang.symbol| toLang tLang}<input type="radio" id="qmod-search-by-symbol" name="search-by" value="symbol" rv-checked="scope.smartlookup.searchBySymbol" rv-on-change="scope.smartlookup.changeSearchBy"/></label></li></ul><div class="qmod-smartlookup-start" rv-show="scope.smartlookup.showStarted"></div><div class="qmod-smartlookup-wrap" rv-each-result="scope.smartlookup.result | groupby 'symbolType' | propertyList" rv-show="scope.smartlookup.activeResultTab | = result.key"><div class="qmod-smartlookup-result"><table class="qmod-table"><tr rv-each-dataset="result.value" rv-data-symbol="dataset.symbol" rv-on-click="scope.lookupCallback"><td><span class="qmod-truncate">{dataset.name}</span></td><td>{dataset.symbol}</td><td class="qmod-mrkcpt qmod-textr">{dataset.countryCode}</td><td class="qmod-textr">{dataset.exchange}</td></tr></table></div></div></div></div></div></div></div><div class="qmod-popup-wrapper qmod-investement-modal" rv-show="investementModal.show" rv-if="scope.modal"><div class="pop-up-middle"><div class="qmod-popup"><div class="qmod-popup-title"><span rv-if="scope.showing | = 'roi'">{tplLang.roi | toLang tLang}</span><span rv-if="scope.showing | = 'splits'">{tplLang.splits | toLang tLang}</span><span rv-if="scope.showing | = 'dividends'">{tplLang.dividends | toLang tLang}</span><div class="qmod-popup-titlebar-buttons"><button class="qmod-btn" rv-on-click="investementModal.close">&times;</button></div></div><div class="qmod-popup-body"><div class="qmod-roi-info" rv-if="scope.showing | ='roi'"><div class="pure-u-1"><div class="qmod-pricehistory-chart-con"><div class="qmod-pricehistory-chart"><div class="phistory-chart"></div></div></div></div><div class="qmod-investment-results"><div class="qmod-initial-investment-headers"><div class="pure-u-1-4">{tplLang.investmentdate| toLang tLang}</div><div class="pure-u-1-4">{tplLang.originalshares| toLang tLang}</div><div class="pure-u-1-4">{tplLang.originalprice| toLang tLang}</div><div class="pure-u-1-4">{tplLang.originalvalue| toLang tLang}</div></div><div class="qmod-initial-investment-values"><div class="pure-u-1-4">{scope.investmentDateDisplay | momentjs 'true' 'DD MMM YYYY' tLang}</div><div class="pure-u-1-4">{scope.originalShares  | numeraljs '0,0' '0' tLang}</div><div class="pure-u-1-4">{scope.investmentPrice | numeraljs '0,0.00[000]' '0.00[000]' tLang}</div><div class="pure-u-1-4">{scope.originalValue | numeraljs '0,0.00' '0.00' tLang}</div></div><div class="qmod-final-investment-headers"><div class="pure-u-1-4">{tplLang.currentdate | toLang tLang}</div><div class="pure-u-1-4">{tplLang.currentshares | toLang tLang}</div><div class="pure-u-1-4">{tplLang.currentprice | toLang tLang}</div><div class="pure-u-1-4">{tplLang.currentvalue | toLang tLang}</div></div><div class="qmod-final-investment-values"><div class="pure-u-1-4">{scope.currentDateDisplay}</div><div class="pure-u-1-4">{scope.currentShares | numeraljs '0,0.[0000]' '0.[0000]' tLang}</div><div class="pure-u-1-4">{scope.currentPrice | numeraljs '0,0.00[000]' '0.00[000]' tLang}</div><div class="pure-u-1-4">{scope.currentValue | numeraljs '0,0.00' '0.00' tLang}</div></div></div><div class="qmod-no-data-today" rv-unless="scope.lastcloseshowing">*{tplLang.nodateavailablefortoday| toLang tLang}</div></div><div class="qmod-roi-info" rv-if="scope.showing | ='splits'"><div class="qmod-splits"><div class="qmod-split" rv-each-split="scope.splits"><div class="pure-u-1-2">{tplLang.date | toLang tLang}: {split.date | momentjs 'true' 'LL'}</div><div class="pure-u-1-2">{tplLang.splitraio | toLang tLang}: {split.splitratio}</div></div></div></div><div class="qmod-roi-info" rv-if="scope.showing | ='dividends'"><div class="qmod-dividend"><div class="qmod-split" rv-each-dividend="scope.dividendsHTML"><div rv-html="dividend"></div></div></div></div></div><div class="qmod-popup-footer"><div class="pure-u-sm-1-2"><div>{tplLang.sharesappreciation | toLang tLang} = {scope.roi | numeraljs '0,0.00' '0.00' tLang}%</div><div>{tplLang.dividendspaidincash | toLang tLang} = ${scope.payout | numeraljs '0,0.00' '0.00' tLang}</div></div><div class="pure-u-sm-1-2 qmod-textr" rv-if="scope.showing | ='roi'"><button class="qmod-btn qmod-btn-sm qmod-btn-go qmod-darkblue qmod-splits-btn" rv-show="scope.hasSplits" rv-on-click="scope.showSplits">Splits Info</button><button class="qmod-btn qmod-btn-sm qmod-btn-go qmod-darkblue qmod-dividens-btn" rv-show="scope.hasDividends" rv-on-click="scope.showDividends">Dividends Info</button></div><div class="pure-u-sm-1-2 qmod-textr" rv-unless="scope.showing | ='roi'"><button class="qmod-btn qmod-btn-sm qmod-btn-go qmod-darkblue" rv-on-click="scope.showRoi">{tplLang.back| toLang tLang}</button></div></div></div></div></div></div>