<html>
    <head>
	<title>{{title}}</title>
	<script src="static/jquery-3.2.0.min.js" ></script>
	<link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css"/>
	<script src="static/bootstrap/js/bootstrap.min.js" ></script>
    </head>
    <body>
	<div class="container">
	    <div class="row">
		<div class="col-12">
		    <h1>{{title}}</h1>
		    
		    <div id="accordion" role="tablist" aria-multiselectable="true">

			{% for m in mths %}
			<div class="card" style="padding-top: 2pt; padding-bottom:2pt; border-radius:0;margin-top:1pt; margin-bottom:1pt">
			    <div class="" role="tab" id="heading{{m.firstmail}}">
				<b class="mb-0">
				    <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{m.firstmail}}" aria-expanded="true" aria-controls="collapse1">
					{{m.tstr()}}
				    </a>
				</b>
			    </div>

			    <div id="collapse{{m.firstmail}}" class="collapse" role="tabpanel" aria-labelledby="headingOne">

				<div class="card-block">
				    <div style="white-space: pre-wrap;font:Courier, monospace; font-size:small; width:50em; border: thin blue solid;">					{{ m.text() }}				    </div>
				</div>
			    </div>
			</div>
			{% endfor %}
		    </div>
		    <div style="white-space: pre-wrap;font:Courier, monospace; font-size:small; width:50em">

			{% for m in mths %}
			ID: {{m.tstr()}}	    
			{{ m.text() }}
			{% endfor %}
			
		    </div>
		</div>
	    </div>
	</div>
    </body>
