{% extends "base.html" %}
{% block nav-home %}<li><a href="/">Home</a></li>{% endblock %}
          
{% block nav-subjects %}<li ><a href="/subjects">My Subjects</a></li>{% endblock %}
{% block nav-available-subjects %}<li class="active"><a href="/available_subjects">Available Subjects</a></li>{% endblock %}
{% block nav-pending-subjects %}<li><a href="/pending_subjects">Pending Requests</a></li>{% endblock %}
{% block body%}
<div class="container" style="margin-top:50px;">
	<div style="width: 70%; margin-left: 20px;">
		<h2>Available Courses</h2>
		
			<table style="width:100%;border: solid grey 1px;box-shadow: 2px 2px;" class="table table-hover">
				<thead>  
				    <tr>  
				        <th style="text-align: center;">Course ID</th>  
				        <th style="text-align: center;">Course Name</th>  
				        <th style="text-align: center;">Professor</th>
				        <th style="text-align: center;">Status</th>  
				    </tr>  
			    </thead>
			    <tbody>  
			{% for subject in subjects %}  
			    <tr>  
			        <td style="text-align: center;">{{ subject.sub_code }}</td>
			        <td style="text-align: center;">{{ subject.sub_name }}</td>
			        <td style="text-align: center;">{{ subject.prof.fname }} {{ subject.prof.lname }}</td>
			        <td style="text-align: center;">
			        	<a href="/request_subject/{{subject.sub_code}}">
				        		<button class="btn btn-primary">Request
				        		</button>
				        	</a>
			        </td>
			    </tr>  
			{% endfor %}  
			    </tbody>  
				
			</table>
		
	</div>
	
</div>
{% endblock %}