<!--written by: Aakash Patel, Mandeep Desai
# tested by: Aakash Patel, Mandeep Desai
# debugged by: Aakash Patel-->

{% extends "base.html" %}
{% block title %}Portfolio{% endblock %}
{% block dashboardNav %}class="selectMenu"{% endblock %}
{% block content %}
<style>
<!-- CSS file -->
.background
{
background-color:#E6E6E6;
}
.pending
{
background-color:#A9A9F5;
color:#ffffff;
border-collapse:collapse;
}
.buy
{
background-color:#01DF3A;
color:#ffffff;
border-collapse:collapse;
}
.sell
{
background-color:#FE2E2E;
color:#ffffff;
}
.watchlist
{
background-color:#D7DF01;
color:#FFFFFF;
}
thead,th,td
{
font:italic bold 12px/30px Georgia,serif;
padding:5px 4px 4px 4px;
text-align:center;
border-collapse:collapse;
}
</style>

<div class="background">
<br />
<h4>Welcome back, {{ leagueuser.user_name }} !!!!</h4=>
<br /> 
<br /> 
<p>League Name:&nbsp;{{ leagueuser.user_league.league_name }}</p>
<p>Cash Balance:&nbsp;${{ leagueuser.cash_balance }}</p>
<p>Current Value:&nbsp;${{ leagueuser.current_value }}</p>
 
<br />			
	<a href="{% url portfolio.views.trade leagueuser.user_league.id %}">Trade</a>
<hr />	
<p><strong>Currently Holdings</strong></p>

<!-- Buy Entries: -->
<caption><strong>Buy Entries:</strong></caption>
<table style="margin-left: auto; margin-right: auto;">
<table border=1>
               <thead class="buy">
               <tr>
                 <th>Name:&nbsp;</th>
                 <th>Buy Price:&nbsp;</th>
                 <th>Buy Date:&nbsp;</th>
                 <th>Quantity:&nbsp;</th>
                 <th>Order Type:&nbsp;</th>
                 <th>Order Status:&nbsp;</th>
               </tr>
               </thead>    
           
		<thead>
              {% for PortfolioEntry in portfolioentries %}	
              <tr class="buy">
		<td>{{ PortfolioEntry.ticker_symbol }}</td>
		<td>$ {{ PortfolioEntry.buy_entry.execution_price }}</td>
		<td>{{ PortfolioEntry.buy_entry.date_executed }}</td>
		<td>{{ PortfolioEntry.quantity }}</td>
		<td>{{ PortfolioEntry.buy_entry.order_type }}</td>
		<td>{{ PortfolioEntry.buy_entry.order_status }}</td>
              </tr>
     		  </thead>
	     {% endfor %}
</table>
<br />

<!-- Sell Entries: -->
<caption><strong>Sell Entries:</strong> </caption>
<table style="margin-left: auto; margin-right: auto;">
<table border=1>
                <thead class="sell">
		   <tr>
                	<th>Name:&nbsp;</th>
                	<th>Sell Price:&nbsp;</th>
                	<th>Sell Date:&nbsp;</th>
                	<th>Quantity:&nbsp;</th>
                	<th>Order Type:&nbsp;</th>
                	<th>Order Status:&nbsp;</th>
                  </tr>
                </thead>
				
		<thead>
		{% for PortfolioEntry in portfolioentries_sell %}	
                    <tr class="sell"> 
			<td>{{ PortfolioEntry.ticker_symbol }}</td>
			<td>$ {{ PortfolioEntry.sell_entry.execution_price }}</td>
			<td>{{ PortfolioEntry.sell_entry.date_executed }}</td>
			<td>{{ PortfolioEntry.quantity }}</td>
			<td>{{ PortfolioEntry.sell_entry.order_type }}</td>
			<td>{{ PortfolioEntry.sell_entry.order_status }}</td>
                   </tr>
     		 </thead>
		 {% endfor %}
</table>	
<br />

<!-- Pending Orders -->
<caption><strong>Pending Orders:</strong> </caption>
<table style="margin-left: auto; margin-right: auto;">
<table border=1>
                <thead class="pending">
                <tr>
                <th>Name:&nbsp;</th>
                <th>Quantity:&nbsp;</th>
                <th>Order Type:&nbsp;</th>
                <th>Date Added:&nbsp;</th>
                </tr>
                </thead>
				
		<thead>
		{% for PortfolioEntry in portfolioentries_pending %}	
                    <tr class="pending">
			<td>{{ PortfolioEntry.ticker_symbol }}</td>
			<td>{{ PortfolioEntry.quantity }}</td>
			{% if PortfolioEntry.buy_entry and not PortfolioEntry.sell_entry %}
				<td><b>BUY</b></td>
				<td>{{ PortfolioEntry.buy_entry.date_added }}</td>
			{% endif %}
			{% if PortfolioEntry.sell_entry and not PortfolioEntry.buy_entry %}
			        <td><b>SELL</b></td>
				<td>{{ PortfolioEntry.sell_entry.date_added }}</td>
			{% endif %}
                    </tr>
     	        </thead>
		{% endfor %}
</table>
<br />
                       
<!-- TradingView Widget BEGIN -->
                        <script type="text/javascript" src="https://s3.amazonaws.com/tradingview/tv.js""></script>
                        <script type="text/javascript">
                        new TradingView.widget({
                                "autosize": true,
                                "symbol": "AAPL",
                                "interval": "D",
                                "toolbar_bg": "#E4E8EB",
                                "allow_symbol_change": true
                                });
                        </script>

<!-- TradingView Widget END -->
<form action="{% url portfolio.views.detail leagueuser_id %}" method="post">
	{% csrf_token %}
	{{ form.as_p }}
	<input type="submit" value="Add to Watchlist" />
</form>
<br /> 

<!-- Watchlist -->
<caption><strong>Watch List:</strong> </caption>
<table style="margin-left: auto; margin-right: auto;">
<table border=1>
                <thead class="watchlist">
                <tr>
                   <th>Name:&nbsp;</th>
		   <th>Current Price:&nbsp;</th>
		   <th>Open Price:&nbsp;</th>
		   <th>Percent Change</th>
                </tr>
                </thead>
		
	      <thead>	
	      {% for stock in tracklist %}	
                <tr class="watchlist">
                   <td>{{ stock.ticker_symbol }}</td>
		   <td>{{ stock.open_price }}</td>
		   <td>{{ stock.last_price }}</td>
		   <td>% {{ stock.percent_change|floatformat:3 }}</td>
                </tr>
	      </thead>
	      {% endfor %}	
</table>
<br />

<p> if you would like to submit Technical Problems/Suggestions,
	<a href="mailto:se_452@googlegroups.com">Email Us</a></p>
	 
</div>
{% endblock %}
