{% load static %}
<div class="modal fade" id="newItemModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
		<h5 class="modal-title" id="exampleModalLabel"><span class="download-text">Download</span> <span class="text-primary "> {{product}} </span> </h5>
		<button type="button" class="close" data-dismiss="modal" aria-label="Close">
		  <span aria-hidden="true">&times;</span>
		</button>
	      </div>
	      <div class="modal-body">
		<div>
			<!--<div> Select the appropriate OS </div> -->
			<div>
				<ul class="list-group">
					{% if product.windows_link != None and product.linux_link_size != None %}
					<div class="p-2">
						<a href="/{{product.windows_link}}" download="{{product}}" onclick="save_download('windows')">
						<li class="list-group-item"> <span> <img style="width:35px;height:30px;" src="{% static 'webpages/img/windows-icon.svg' %}" class="mr-2"> Windows </span> <span class="badge"> ( {{product.windows_link_size}} ) </span> </li>
						</a>
					</div>
					{% endif %}
					
					{% if product.linux_link != None and product.linux_link_size != None %}
					<div class="p-2">
						<a onclick="save_download('linux')" href="/{{product.linux_link}}" download="{{product}}">
						<li class="list-group-item"> <span> <img style="width:35px;height:35px;" src="{% static 'webpages/img/linux-icon.svg' %}" class="mr-2"> Linux </span> <span class="badge"> ( {{product.linux_link_size}} ) </span> </li>
						</a>
					</div>
					{% endif %}
					
					{% if product.macos_link != None and product.linux_link_size != None %}
					<div class="p-2">
						<a onclick="save_download('macos')" href="/{{product.macos_link}}" download="{{product}}">
						<li class="list-group-item"> <span> <img style="width:35px;height:30px;" src="{% static 'webpages/img/macos-icon.svg' %}" class="mr-2"> Mac OS </span> <span class="badge"> ( {{product.macos_link_size}}) </span> </li>
						</a>
					</div>
					{% endif %}
					
				</ul>
			</div>
		</div>
	      </div>
	      <!--
	      <div class="modal-footer">
		<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
		<button type="button" class="btn btn-primary">Save changes</button>
	      </div>
	      -->
	    </div>
	  </div>
</div>
</div>
