templates/company_template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SWEatshop.tech</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet">
<link rel="stylesheet" href="/static/css/styles.processed.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<link rel="shortcut icon" href="/static/img/favicon.ico">
</head>
<body class="gradient-bg">
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse-opacity">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="/index.html"><img alt="Brand" src="/static/img/sweatshop-logo.png" style="width: 200px;"></a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/companies.html">Companies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/people.html">People</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/investors.html">Investors</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/schools.html">Schools</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/visualization.html">Visualization</a>
</li>
<li><a href="#search"><img src="http://www.freeiconspng.com/uploads/search-icon-png-4.png" style="height: 35px;"></a></li>
</ul>
</div>
</nav>
<div class="container" style="min-height:86vh">
<h1 class="cover-heading">{{company.name}}</h1>
<br/><br/>
<div class="card" style="background-color: #333; border-color: #333; color: #eee;">
<div class="card-block">
<div class="row">
<div class="col-sm-12 col-lg-4">
<img src="{{company.image_url}}" alt="Company Logo" />
</div>
<div class="col-sm-12 col-lg-8" style="text-align: left;">
<b>Ownership Type: </b>{{company.ownership_type}}<br/>
<b>CEO: </b><a href="../../person/{{ceo.idnum}}">{{ceo.name}}</a><br/>
<b>Location: </b>{{company.location}}<br/>
<b>Country: </b>{{company.country}}<br/>
<b>Employees: </b>
{% for employee in employees %}
<a href="../../person/{{employee.idnum}}">{{employee.name }}</a>
{% endfor %}
<br/>
<b>Investors: </b>
{% for investor in investors %}
<a href="../../investor/{{investor.idnum}}">{{investor.name }}</a>
{% endfor %}
<br/>
<b>Website: </b><a href="{{company.website}}">{{company.website}}</a><br/>
<b>Description: </b>{{description}}<br/>
</div>
</div>
</div>
</div>
<div class="card" style="background-color: #333; border-color: #333; color: #eee;">
<div class="card-block">
<iframe src="https://www.google.com/maps/embed/v1/place?q={{company.location}}&zoom=9&key=AIzaSyCWG2UDFO2LYEWx_dHDiLjeDBAYkeQ2vFc" width=100% height=300px></iframe>
</div>
</div>
</div>
<div class="outro">
© SWEatshop 2017
</div>
</body>
<div id="search">
<button type="button" class="close">×</button>
<form action="/search" method="get">
<input type="search" name="query" value="" placeholder="type keyword(s) here" />
<button type="submit" class="btn btn-primary">Search</button>
</form>
</div>
<script>
$(function () {
$('a[href="#search"]').on('click', function(event) {
event.preventDefault();
$('#search').addClass('open');
$('#search > form > input[type="search"]').focus();
});
$('#search, #search button.close').on('click keyup', function(event) {
if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
$(this).removeClass('open');
}
});
});
</script>
</html>