resources/templates/representations.vue.html

<div class="representation-widget">
	<ul v-if="!inEditMode" 
		class="representation-widget_representation-list">
		<li v-for="representation in representations" 
			class="representation-widget_representation">
			<span class="representation-widget_representation-value"
				:lang="representation.language">
				{{representation.value}}
			</span>
			<span class="representation-widget_representation-language">
				{{representation.language}}
			</span>
		</li>
	</ul>
	<div v-else>
		<div class="representation-widget_edit-area">
			<ul class="representation-widget_representation-list">
				<li v-for="(representation, index) in representations"
					class="representation-widget_representation-edit-box">
					<label :for="inputRepresentationId(index)"
						class="representation-widget_representation-value-label">
						{{'wikibaselexeme-form-field-representation-label'|message}}
					</label>
					<input size="1" 
						class="representation-widget_representation-value-input"
						:value="representation.value"
						:id="inputRepresentationId(index)"
						@input="updateValue(representation, $event)">
					<label :for="inputLanguageId(index)"
						class="representation-widget_representation-language-label">
						{{'wikibaselexeme-form-field-language-label'|message}}
					</label>
					<input size="1" 
						class="representation-widget_representation-language-input"
						:id="inputLanguageId(index)"
						:value="representation.language"
						@input="updateLanguage(representation, $event)"
						:class="{
							'representation-widget_representation-language-input_redundant-language':
								isRedundantLanguage(representation.language)
						}"
						:aria-invalid="isRedundantLanguage(representation.language)">
					<button class="representation-widget_representation-remove"
						v-on:click="remove(representation)"
						:disabled="representations.length <= 1"
						:title="'wikibase-remove'|message">
						&times;
					</button>
				</li>
				<li class="representation-widget_edit-area-controls">
					<button type="button" 
						class="representation-widget_add" 
						v-on:click="add"
						:title="'wikibase-add'|message">
						+
					</button>
				</li>
			</ul>
		</div>
		<div v-if="hasRedundantLanguage" 
			class="representation-widget_redundant-language-warning">
			<p>{{'wikibaselexeme-form-representation-redundant-language'|message}}</p>
		</div>
	</div>
</div>