<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"/>
</head>
<body>
<div class = "header">
<div class = "left-section">
<p class = "logo">Search Engine</p>
</div>
<div class = "middle-section">
<form action="" method="GET">
<input class = "search-box" type="text" name='search_word' placeholder="search...">
<input class = "submit-box" type="submit" value="Go">
</form>
</div>
<div class = "right-section">
<div class="crop-container">
<img src="{{ url_for('static', filename='img/search_platypus.png') }}" alt="Search platypus" class="search-platypus"/>
</div>
</div>
</div>
{% if result == "start" %}
{% elif result[0][0] is defined %}
<div class="top-section">
<div class="result-area">
<a class="results">Results for: </a>
<a class="results-word">{{ search }}</a>
<p class="result-length"> {{ result[1] }} Results</p>
</div>
<img src="{{ url_for('static', filename='img/secret_perry.png') }}" class="secret-perry">
</div>
<ul>
{% for item in result[0] %}
<li>
<div class="result-box">
<a href= {{ item[0] }}> {{ item[2] }} </a>
<p> {{ item[1]|safe }} </p>
</div>
</li>
{% endfor %}
</ul>
{% else %}
<img src="{{ url_for('static', filename='img/sad_platypus.png') }}" alt="Sad platypus" class="sad-platypus">
<a class="no-results">No Results</a>
{% endif %}
</body>
</html>