{% extends "scon/base.html" %}

{% block context %}
<img src="{{MEDIA_URL}}scon/conflict-logo.png" style="position: absolute; float:left; top: -42px;">
<h1 style="margin-left: 160px;">Crafting Overview</h1>
<table>
	<thead>
		<tr>
			<th>Source</th>
			<th style="width: 1em;">&nbsp;</th>
			<th>Crafts into</th>
			<th>Also used in</th>
		</tr>
	</thead>
	<tbody>
	{% for item in items %}
	{% if item.primary_recipee %}
	<tr class="nobreak">
		<td class="nobreak">
		<div class="panel item">
		{% if item.icon %}<img src="{{ MEDIA_URL }}scon/icons/{{ item.icon }}.png">{% endif %} {{ item.name }}
		{% if item.sell_price %}<br><i>Sell: {{item.sell_price}} cr</i>{% endif %}
		</div>
		</td>

		{% with item.primary_recipee as recipee %}
		<td class="nobreak">
		<div class="arrowright nobreak">{% if recipee.amount > 1 %}{{ recipee.amount }}{% endif %}</div>
		</td>
		
		<td class="nobreak">
			<div class="nobreak">
			<div class="panel item nobreak">
			{% if recipee.output.icon %}<img src="{{ MEDIA_URL }}scon/icons/{{ recipee.output.icon }}.png">{% endif %} {{ recipee.output.html }}
			{% if recipee.output.sell_price %}<br><i>Sell: {{recipee.output.sell_price}} cr</i>{% endif %}
			</div>
			<div class="panel-light item-sub nobreak">
				<ul>
				{% for ingredient in recipee.ingredients %}
					<li>{{ ingredient.amount }} x {{ ingredient.item.html }}</li>
				{% endfor %}
				</ul>
			</div>
			</div>
		</td>
		<td class="nobreak">
		<ul class="remarks">
			{% for i1 in item.crafting_used_in %}
			{% with i1.crafting.output as ci %}
			{% if ci.pk != recipee.output.pk %}
			<li>{{ ci.html }}</li>
			{% endif %}
			{% for i2 in ci.crafting_used_in %}
			<li><i>{{ i2.crafting.output.html }} ({{ci.html}})</i></li>
			{% endfor %}
			{% endwith %}
			{% endfor %}
		</ul>
		</td>
		{% endwith %}
	</tr>
	<tr class="breakable"><td class="breakable" colspan="4"><span class="breakable">&nbsp;</span></td></tr>
	{% endif %}
	{% endfor %}
	</tbody>
</table>
{% endblock context %}