<h3>Monster / NPC - {{obj.name}}</h3>
<div class="prevNext">
	<a class="btn btn-secondary" ng-click="previous()"><i class="icon-backward"></i></a>
	<a class="btn btn-secondary" ng-click="next()"><i class="icon-forward"></i></a>
</div>
<fieldset>
	<legend>General</legend>
	<div class="fieldWithLabel">
		<label for="iconID">Icon:</label>
		<span class="field">
			<div ng-tile-image="obj.iconID" class="at-input-icon" ng-select-image="monster" ng-select-image-dest="obj.iconID"></div>
			<input type="text" id="iconID" class="at-input-iconID" ng-model="obj.iconID" />
		</span>
	</div>
	<div class="fieldWithLabel">
		<label for="id" class="hint  hint--top" data-hint="The id is not displayed to the player anywhere. Must be a unique id (no two monster may have the same id). Prefer short ids since it keeps savegames smaller.">Internal id:</label>
		<input type="text" size="30" id="id" class="field at-input-id" ng-model="obj.id"/>
	</div>
	<div class="fieldWithLabel">
		<label for="name">Display name:</label>
		<input type="text" size="30" id="name" class="field at-input-name" ng-model="obj.name"/>
	</div>
	<div class="fieldWithLabel">
		<label for="spawnGroup" class="hint  hint--top" data-hint="The name to enter on spawn areas in TMX map files for spawning this type of monster. Several monster types may have the same spawngroup, which makes the game spawn one random monster type from the spawngroup.">Spawngroup:</label>
		<input type="text" size="30" id="spawnGroup" class="field at-input-id" ng-model="obj.spawnGroup" />
	</div>
	<div class="fieldWithLabel">
		<label class="checkbox">
			<input type="checkbox" id="unique" ng-model="obj.unique" ng-true-value="1" ng-false-value="0" />
			<span class="hint  hint--top" data-hint="Unique monsters will not respawn. Typically used for bosses.">Is unique (will not respawn)</span>
		</label>
	</div>
	<div class="fieldWithLabel">
		<label for="monsterClass">Monster class:</label>
		<select class="field" id="monsterClass" ng-model="obj.monsterClass">
			<option value="humanoid">Humanoid</option>
			<option value="insect">Insect</option>
			<option value="demon">Demon</option>
			<option value="construct">Construct</option>
			<option value="animal">Animal</option>
			<option value="giant">Giant</option>
			<option value="undead">Undead</option>
			<option value="reptile">Reptile</option>
			<option value="ghost">Ghost</option>
		</select>
	</div>
	<div class="fieldWithLabel">
		<label class="checkbox"><input type="checkbox" id="showAdvanced" ng-model="obj.showAdvanced" />Show advanced properties</label>
	</div>
	<div class="fieldWithLabel" ng-ds-fade="obj.showAdvanced">
		<label for="size">Size:</label>
		<select class="field" id="size" ng-model="obj.size">
			<option value="1x1">1x1</option>
			<option value="1x2">1x2</option>
			<option value="1x3">1x3</option>
			<option value="2x1">2x1</option>
			<option value="2x2">2x2</option>
			<option value="2x3">2x3</option>
			<option value="3x1">3x1</option>
			<option value="3x2">3x2</option>
			<option value="3x3">3x3</option>
		</select>
	</div>
	<div class="fieldWithLabel" ng-ds-fade="obj.showAdvanced">
		<label for="faction" class="hint  hint--top" data-hint="Used for making whole groups of monsters aggressive from dialogue. Dialogue replies may affect the player's faction ratings, and having rating less than 0 for a faction will make all monsters in a faction automatically attack.">Faction:</label>
		<input type="text" size="30" id="faction" ng-model="obj.faction" class="field at-input-id"/>
	</div>
	<div class="fieldWithLabel" ng-ds-fade="obj.showAdvanced">
		<label for="movementAggressionType">Movement in combat (only when aggressive):</label>
		<select class="field" id="movementAggressionType" ng-model="obj.movementAggressionType">
			<option value="none">Does not move in combat</option>
			<option value="helpOthers">Help others in same spawn area</option>
			<option value="protectSpawn">Move towards player if inside spawn area</option>
			<option value="wholeMap">Move towards player even outside its spawn area</option>
		</select>
	</div>
	<div class="fieldWithLabel">
		<label class="checkbox"><input type="checkbox" id="hasConversation" ng-model="obj.hasConversation" />Has conversation</label>
	</div>
	<div class="fieldWithLabel" id="hasConversationDisplay" ng-ds-fade="obj.hasConversation">
		<label for="phraseID" class="hint  hint--top" data-hint="ID of the starting conversation phrase that will be used when engaging in conversation with this NPC.">Conversation phrase ID:</label>
		<input type="text" size="30" id="phraseID" ng-model="obj.phraseID" class="field at-input-id" />
	</div>
	<div class="fieldWithLabel">
		<label for="droplistID" class="hint  hint--top" data-hint="ID of the droplist that will contain the items that are dropped when the monster is killed. If this monster is an NPC, this is the list of items that are available to buy as shop items.">Droplist ID (combat or shop):</label>
		<input type="text" size="30" id="droplistID" ng-model="obj.droplistID" class="field at-input-id"/>
	</div>
</fieldset>
<fieldset>
	<legend>Stats</legend>
	<div class="fieldWithLabel">
		<label for="maxAP">Total AP:</label>
		<input type="text" size="5" id="maxAP" ng-model="obj.maxAP" class="field at-input-stat" />
	</div>
	<div class="fieldWithLabel">
		<label for="moveCost">Movement cost (AP):</label>
		<input type="text" size="5" id="moveCost" ng-model="obj.moveCost" class="field at-input-stat" />
	</div>
	<div class="fieldWithLabel">
		<label for="maxHP">Max HP:</label>
		<input type="text" size="5" id="maxHP" ng-model="obj.maxHP" class="field at-input-stat" />
	</div>
	<div class="fieldWithLabel">
		<label class="checkbox"><input type="checkbox" id="hasCombat" ng-model="obj.hasCombatTraits" />Has combat traits</label>
	</div>
</fieldset>
<fieldset id="hasCombatDisplay" ng-ds-fade="obj.hasCombatTraits">
	<legend>Combat</legend>
	<div class="fieldWithLabel">
		<label for="experience">Experience:</label>
		<input type="text" size="7" id="experience" value="{{getExperience()}}" class="field at-input-stat" readonly="readonly" />
	</div>
	<div class="fieldWithLabel">
		<label for="attackCost">Attack cost (AP):</label>
		<input type="text" size="5" id="attackCost" ng-model="obj.attackCost" class="field at-input-stat" />
	</div>
	<div class="fieldWithLabel">
		<label for="attackChance">Attack chance:</label>
		<input type="text" size="5" id="attackChance" ng-model="obj.attackChance" class="field at-input-stat" />%
	</div>
	<div class="fieldWithLabel">
		<label for="attackDamage">Attack damage (range):</label>
		<div class="field">
			<input type="text" size="3" id="attackDamage_Min" ng-model="obj.attackDamage.min" class="at-input-stat-minmax" /> 
			- 
			<input type="text" size="3" id="attackDamage_Max" ng-model="obj.attackDamage.max" class="at-input-stat-minmax" />
		</div>
	</div>
	<div class="fieldWithLabel">
		<label class="checkbox"><input type="checkbox" id="hasCritical" ng-model="obj.hasCritical" />Has critical chance</label>
	</div>
	<div class="fieldWithLabel" ng-ds-fade="obj.hasCritical">
		<label for="criticalSkill">Critical skill:</label>
		<input type="text" size="5" id="criticalSkill" ng-model="obj.criticalSkill" class="field at-input-stat" />
	</div>
	<div class="fieldWithLabel" ng-ds-fade="obj.hasCritical">
		<label for="criticalMultiplier">Critical multiplier:</label>
		<input type="text" size="5" id="criticalMultiplier" ng-model="obj.criticalMultiplier" class="field at-input-stat" />
	</div>
	<div class="fieldWithLabel">
		<label for="blockChance">Block chance:</label>
		<input type="text" size="5" id="blockChance" ng-model="obj.blockChance" class="field at-input-stat" />%
	</div>
	<div class="fieldWithLabel">
		<label for="damageResistance">Damage resistance:</label>
		<input type="text" size="5" id="damageResistance" ng-model="obj.damageResistance" class="field at-input-stat" />
	</div>
	<div class="fieldWithLabel">
		<label class="checkbox"><input type="checkbox" id="hasHitEffect" ng-model="obj.hasHitEffect" />Has effect on each hit</label>
	</div>
</fieldset>
<fieldset id="hasHitEffectDisplay" ng-ds-fade="obj.hasHitEffect && obj.hasCombatTraits">
	<legend>On every successful attack hit</legend>
	<div class="fieldWithLabel">
		<label for="onHit_boostHP">Boost current HP (range):</label>
		<div class="field">
			<input type="text" size="3" id="onHit_boostHP_Min" ng-model="obj.hitEffect.increaseCurrentHP.min" class="at-input-stat-minmax" />
			-
			<input type="text" size="3" id="onHit_boostHP_Max" ng-model="obj.hitEffect.increaseCurrentHP.max" class="at-input-stat-minmax" />
		</div>
	</div>
	<div class="fieldWithLabel">
		<label for="onHit_boostAP">Boost current AP (range):</label>
		<div class="field">
			<input type="text" size="3" id="onHit_boostAP_Min" ng-model="obj.hitEffect.increaseCurrentAP.min" class="at-input-stat-minmax" />
			-
			<input type="text" size="3" id="onHit_boostAP_Max" ng-model="obj.hitEffect.increaseCurrentAP.max" class="at-input-stat-minmax" />
		</div>
	</div>
	<div class="fieldWithLabel">
		<label for="onHit_conditionsSource">Conditions added to source</label>
		<table class="field" id="onHit_conditionsSource">
			<thead>
				<tr>
					<th><span class="hint  hint--left" data-hint="Id of the actor condition to be applied.">Condition</span></th>
					<th><span class="hint  hint--left" data-hint="How strong the effect should be. For example, magnitude=2 is equal to having two effects active at the same time. Use -99 to remove permanent effects.">Magnitude</span></th>
					<th><span class="hint  hint--left" data-hint="How many rounds the actor condtions should last. Use 999 for a permanent effect.">Duration</span></th>
					<th><span class="hint  hint--left" data-hint="Percentage chance, integer value from 1 (very unlikely) to 100 (always).">Chance</span></th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="condition in obj.hitEffect.conditionsSource">
					<td><input type="text" ng-model="condition.condition" class="at-input-id" /></td>
					<td><input type="text" size="3" ng-model="condition.magnitude" class="at-input-magnitude" /></td>
					<td><input type="text" size="3" ng-model="condition.duration" class="at-input-duration" /></td>
					<td><input type="text" size="3" ng-model="condition.chance" class="at-input-chance" /></td>
					<td><a ng-click="removeCondition(obj.hitEffect.conditionsSource, condition)" class="btn btn-mini" title="Remove row"><i class="icon-trash"></i></a></td>
				</tr>
			</tbody>
		</table>
		<button ng-click="addCondition(obj.hitEffect.conditionsSource)" class="btn" title="Add row"><i class="icon-plus-sign"></i> Add</button>
	</div>
	<div class="fieldWithLabel">
		<label for="onHit_conditionsTarget">Conditions added to target</label>
		<table class="field" id="onHit_conditionsTarget">
			<thead>
				<tr>
					<th><span class="hint  hint--left" data-hint="Id of the actor condition to be applied.">Condition</span></th>
					<th><span class="hint  hint--left" data-hint="How strong the effect should be. For example, magnitude=2 is equal to having two effects active at the same time. Use -99 to remove permanent effects.">Magnitude</span></th>
					<th><span class="hint  hint--left" data-hint="How many rounds the actor condtions should last. Use 999 for a permanent effect.">Duration</span></th>
					<th><span class="hint  hint--left" data-hint="Percentage chance, integer value from 1 (very unlikely) to 100 (always).">Chance</span></th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="condition in obj.hitEffect.conditionsTarget">
					<td><input type="text" ng-model="condition.condition" class="at-input-id" /></td>
					<td><input type="text" size="3" ng-model="condition.magnitude" class="at-input-magnitude" /></td>
					<td><input type="text" size="3" ng-model="condition.duration" class="at-input-duration" /></td>
					<td><input type="text" size="3" ng-model="condition.chance" class="at-input-chance" /></td>
					<td><a ng-click="removeCondition(obj.hitEffect.conditionsTarget, condition)" class="btn btn-mini" title="Remove row"><i class="icon-trash"></i></a></td>
				</tr>
			</tbody>
		</table>
		<button ng-click="addCondition(obj.hitEffect.conditionsTarget)" class="btn" title="Add row"><i class="icon-plus-sign"></i> Add</button>
	</div>
</fieldset>
<div class="endSets"> </div>
