template.html

<style>
    #tutorial-btn {
	margin-bottom: 20px;
    }
    input[placeholder] {
	text-overflow: ellipsis;
    }
    select {
	width: 100%;
    }
    .form-step {
	display: none;
    }
    .form-group.btn-group {
	width: 100%;
    }
    .checkbox-inline[data-toggle=collapse] {
	display: block;
	margin-bottom: 10px;
    }
    @media (min-width: 1200px) {
	#image-container {
	    width: calc(1170px/2);
	}
    }
    @media (min-width: 992px) and (max-width: 1199px) {
	#image-container {
	    width: calc(970px/2);
	}
    }
    @media (min-width: 768px) and (max-width: 991px) {
	#image-container {
	    width: calc(750px/2);
	}
    }
    @media (min-width: 768px) {
	#image-container {
	    position: fixed;
	    left: inherit;
	    padding-left: inherit;
	    padding-right: inherit;
	}
	#tutorial-btn {
	    float: right;
	    margin-top: 30px;
	}
    }
</style>

<div class="row skeleton">

    <!-- Image -->
    <div class="col-xs-12 col-sm-6 col-sm-push-6">
	<div id="image-container">
	    <a href="#" id="photo-link"><img alt="Loading" id="photo" src="https://i.imgur.com/GeHxzb7.png"></a>
	</div>
    </div>

    <!-- Question and Answer -->
    <div class="col-xs-12 col-sm-6 col-sm-pull-6">

        <div class="row">
            <div class="col-xs-12 col-sm-8">
                <h1 id="question">What is this item?</h1>
            </div>
            <div class="col-xs-12 col-sm-4">
                <a href="../tutorial" id="tutorial-btn" class="btn btn-inverse">
		    <span class="fa fa-book"></span> Tutorial
		</a>
            </div>
        </div>

	<div class="row">
	    <div class="col-xs-12">
		<form id="transcription-form" name="transcription-form" role="form">

		    <!-- Page 1 -->
		    <div class="form-step" data-step="1">
			<div class="form-group">
			    <label for="shelfmark">Shelfmark:</label>
			    <input id="shelfmark" class="form-control" type="text">
			</div>
			<div class="form-group">
			    <label for="isbn">ISBN:</label>
			    <input id="isbn" class="form-control" type="text">
			</div>
			<div class="form-group">
			    <label for="script_note">Script note:</label>
			    <input id="script_note" class="form-control" type="text">
			</div>
			<div class="form-group">
			    <label for="language">Language:</label>
			    <select id="language"></select>
			</div>
			<label class="checkbox-inline" data-toggle="collapse" data-target="#language-collapse">
			    <input type="checkbox"> This item is written in more than one language
			</label>
			<div id="language-collapse" class="collapse">
			    <br>
			    <div class="form-group">
				<label for="multiple_languages">Additional languages:</label>
				<select id="multiple_languages" multiple="multiple"></select>
			    </div>
			    <div class="form-group">
				<label for="language_note">Language note:</label>
				<input id="language_note" class="form-control" type="text">
			    </div>
			</div>
			<hr>
			<div class="text-right" role="group">
			    <button type="button" class="btn btn-success btn-next">Next Step</button>
			</div>
		    </div>

		    <!-- Page 2 -->
		    <div class="form-step" data-step="2">
			<div class="form-group">
			    <label for="title_romanised">Title (romanised form):</label>
			    <input id="title_romanised" class="form-control" type="text">
			</div>
			<div class="form-group">
			    <label for="non_filing_romanised">Non-filing characters (romanised form):</label>
			    <input id="non_filing_romanised" class="form-control" type="text">
			</div>
			<div class="form-group">
			    <label for="title_original">Title (original script):</label>
			    <input id="title_original" class="form-control" type="text">
			</div>
			<div class="form-group">
			    <label for="non_filing_original">Non-filing characters (original script):</label>
			    <input id="non_filing_original" class="form-control" type="text">
			</div>
			<div class="form-group">
			    <label for="state_of_res_romanised">Statement of responsibility (romanised form):</label>
			    <input id="state_of_res_romanised" class="form-control" type="text">
			</div>
			<div class="form-group">
			    <label for="state_of_res_original">Statement of responsibility (original script):</label>
			    <input id="state_of_res_original" class="form-control" type="text">
			</div>
			<div class="form-group">
			    <label for="notes">Notes:</label>
			    <input id="notes" class="form-control" type="text">
			</div>
			<label class="checkbox-inline" data-toggle="collapse" data-target="#title-collapse">
			    <input type="checkbox"> The item has a subtitle or a parallel title
			</label>
			<div id="title-collapse" class="collapse">
			    <br>
			    <div class="form-group">
				<label for="subtitle_romanised">Subtitle (romanised form):</label>
				<input id="subtitle_romanised" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="subtitle_original">Subtitle (original script):</label>
				<input id="subtitle_original" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="parallel_title_romanised">Parallel title (romanised form):</label>
				<input id="parallel_title_romanised" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="parallel_title_original">Parallel title (original script):</label>
				<input id="parallel_title_original" class="form-control" type="text">
			    </div>
			</div>
			<hr>
			<div class="text-right" role="group">
			    <button type="button" class="btn btn-default btn-previous">Previous Step</button>
			    <button type="button" class="btn btn-success btn-next">Next Step</button>
			</div>
		    </div>

		    <!-- Page 3 -->
		    <div class="form-step" data-step="3">
			<div class="form-group btn-group">
			    <label for="author_type">Main author Type:</label>
			    <div class="radio">
				<label>
				    <input type="radio" name="author_type" value="personal" data-toggle="collapse"
					   data-target="#personal_author_collapse">Personal
				</label>
			    </div>
			    <div class="radio">
				<label>
				    <input type="radio" name="author_type" value="corporate" data-toggle="collapse"
					   data-target="#corporate_author_collapse">Corporate
				</label>
			    </div>
			    <div class="radio">
				<label>
				    <input type="radio" name="author_type" value="meeting" data-toggle="collapse"
					   data-target="#meeting_author_collapse">Meeting
				</label>
			    </div>
			</div>
			<div id="personal_author_collapse" class="collapse">
			    <div class="form-group">
				<label for="pers_author_romanised">Personal author (romanised form):</label>
				<input id="pers_author_romanised" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="pers_author_fore_surname">Forename or surname:</label>
				<select id="pers_author_fore_surname" class="form-control">
				    <option selected="" value=""></option>
				    <option value="Forename">Forename</option>
				    <option value="Surname">Surname</option>
				</select>
			    </div>
			    <div class="form-group">
				<label for="pers_author_original">Personal author (original script):</label>
				<input id="pers_author_original" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="pers_author_relationship">Relationship to resource:</label>
				<select id="pers_author_relationship" class="form-control">
				    <option selected="" value=""></option>
				    <option value="author">Author</option>
				    <option value="addressee">Addressee</option>
				    <option value="artist">Artist</option>
				    <option value="cartographer">Cartographer</option>
				    <option value="compiler">Compiler</option>
				    <option value="composer">Composer</option>
				    <option value="host institution">Host Institution</option>
				    <option value="issuing body">Issuing Body</option>
				    <option value="organizer">Organizer</option>
				    <option value="photographer">Photographer</option>
				    <option value="sponsoring body">Sponsoring Body</option>
				</select>
			    </div>
			</div>
			<div id="corporate_author_collapse" class="collapse">
			    <div class="form-group">
				<label for="corp_author_romanised">Corporate author (romanised form):</label>
				<input id="corp_author_romanised" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="corp_author_original">Corporate author (original script):</label>
				<input id="corp_author_original" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="corp_author_jurisdiction">Jurisdiction name or direct order:</label>
				<select id="corp_author_jurisdiction" class="form-control">
				    <option selected="" value=""></option>
				    <option value="Jurisdiction">Jurisdiction</option>
				    <option value="Direct">Direct</option>
				</select>
			    </div>
			    <div class="form-group">
				<label for="corp_author_relationship">Relationship to resource:</label>
				<select id="corp_author_relationship" class="form-control">
				    <option selected="" value=""></option>
				    <option value="author">Author</option>
				    <option value="addressee">Addressee</option>
				    <option value="artist">Artist</option>
				    <option value="cartographer">Cartographer</option>
				    <option value="compiler">Compiler</option>
				    <option value="composer">Composer</option>
				    <option value="host institution">Host Institution</option>
				    <option value="issuing body">Issuing Body</option>
				    <option value="organizer">Organizer</option>
				    <option value="photographer">Photographer</option>
				    <option value="sponsoring body">Sponsoring Body</option>
				</select>
			    </div>
			</div>
			<div id="meeting_author_collapse" class="collapse">
			    <div class="form-group">
				<label for="meet_author_romanised">Meeting name (romanised form):</label>
				<input id="meet_author_romanised" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="meet_author_original">Meeting name (original script):</label>
				<input id="meet_author_original" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="meet_author_relationship">Relationship to resource:</label>
				<select id="meet_author_relationship" class="form-control">
				    <option selected="" value=""></option>
				    <option value="author">Author</option>
				    <option value="addressee">Addressee</option>
				    <option value="artist">Artist</option>
				    <option value="cartographer">Cartographer</option>
				    <option value="compiler">Compiler</option>
				    <option value="composer">Composer</option>
				    <option value="host institution">Host Institution</option>
				    <option value="issuing body">Issuing Body</option>
				    <option value="organizer">Organizer</option>
				    <option value="photographer">Photographer</option>
				    <option value="sponsoring body">Sponsoring Body</option>
				</select>
			    </div>
			</div>
			<label class="checkbox-inline" data-toggle="collapse" data-target="#personal_author_collapse2">
			    <input type="checkbox"> Specify a second personal author
			</label>
			<div id="personal_author_collapse2" class="collapse">
			    <div class="form-group">
				<label for="pers_author_romanised_2">Personal author (romanised form):</label>
				<input id="pers_author_romanised_2" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="pers_author_fore_surname_2">Forename or surname:</label>
				<select id="pers_author_fore_surname_2" class="form-control">
				    <option selected="" value=""></option>
				    <option value="Forename">Forename</option>
				    <option value="Surname">Surname</option>
				</select>
			    </div>
			    <div class="form-group">
				<label for="pers_author_original_2">Personal author (original script):</label>
				<input id="pers_author_original_2" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="pers_author_relationship_2">Relationship to resource:</label>
				<select id="pers_author_relationship_2" class="form-control">
				    <option selected="" value=""></option>
				    <option value="author">Author</option>
				    <option value="addressee">Addressee</option>
				    <option value="artist">Artist</option>
				    <option value="cartographer">Cartographer</option>
				    <option value="compiler">Compiler</option>
				    <option value="composer">Composer</option>
				    <option value="host institution">Host Institution</option>
				    <option value="issuing body">Issuing Body</option>
				    <option value="organizer">Organizer</option>
				    <option value="photographer">Photographer</option>
				    <option value="sponsoring body">Sponsoring Body</option>
				</select>
			    </div>
			</div>
			<label class="checkbox-inline" data-toggle="collapse" data-target="#personal_author_collapse3">
			    <input type="checkbox"> Specify a third personal author
			</label>
			<div id="personal_author_collapse3" class="collapse">
			    <div class="form-group">
				<label for="pers_author_romanised_3">Personal author (romanised form):</label>
				<input id="pers_author_romanised_3" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="pers_author_fore_surname_3">Forename or surname:</label>
				<select id="pers_author_fore_surname_3" class="form-control">
				    <option selected="" value=""></option>
				    <option value="Forename">Forename</option>
				    <option value="Surname">Surname</option>
				</select>
			    </div>
			    <div class="form-group">
				<label for="pers_author_original_3">Personal author (original script):</label>
				<input id="pers_author_original_3" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="pers_author_relationship_3">Relationship to resource:</label>
				<select id="pers_author_relationship_3" class="form-control">
				    <option selected="" value=""></option>
				    <option value="author">Author</option>
				    <option value="addressee">Addressee</option>
				    <option value="artist">Artist</option>
				    <option value="cartographer">Cartographer</option>
				    <option value="compiler">Compiler</option>
				    <option value="composer">Composer</option>
				    <option value="host institution">Host Institution</option>
				    <option value="issuing body">Issuing Body</option>
				    <option value="organizer">Organizer</option>
				    <option value="photographer">Photographer</option>
				    <option value="sponsoring body">Sponsoring Body</option>
				</select>
			    </div>
			</div>
			<label class="checkbox-inline" data-toggle="collapse" data-target="#personal_author_collapse4">
			    <input type="checkbox"> Specify a fourth personal author
			</label>
			<div id="personal_author_collapse4" class="collapse">
			    <div class="form-group">
				<label for="pers_author_romanised_4">Personal author (romanised form):</label>
				<input id="pers_author_romanised_4" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="pers_author_fore_surname_4">Forename or surname:</label>
				<select id="pers_author_fore_surname_4" class="form-control">
				    <option selected="" value=""></option>
				    <option value="Forename">Forename</option>
				    <option value="Surname">Surname</option>
				</select>
			    </div>
			    <div class="form-group">
				<label for="pers_author_original_4">Personal author (original script):</label>
				<input id="pers_author_original_4" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="pers_author_relationship_4">Relationship to resource:</label>
				<select id="pers_author_relationship_4" class="form-control">
				    <option selected="" value=""></option>
				    <option value="author">Author</option>
				    <option value="addressee">Addressee</option>
				    <option value="artist">Artist</option>
				    <option value="cartographer">Cartographer</option>
				    <option value="compiler">Compiler</option>
				    <option value="composer">Composer</option>
				    <option value="host institution">Host Institution</option>
				    <option value="issuing body">Issuing Body</option>
				    <option value="organizer">Organizer</option>
				    <option value="photographer">Photographer</option>
				    <option value="sponsoring body">Sponsoring Body</option>
				</select>
			    </div>
			</div>
			<label class="checkbox-inline" data-toggle="collapse" data-target="#corporate_author_collapse2">
			    <input type="checkbox"> Specify a second corporate author
			</label>
			<div id="corporate_author_collapse2" class="collapse">
			    <div class="form-group">
				<label for="corp_author_romanised_2">Corporate author (romanised form):</label>
				<input id="corp_author_romanised_2" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="corp_author_original_2">Corporate author (original script):</label>
				<input id="corp_author_original_2" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="corp_author_jurisdiction_2">Jurisdiction name or direct order:</label>
				<select id="corp_author_jurisdiction_2" class="form-control">
				     <option selected="" value=""></option>
				    <option value="Jurisdiction">Jurisdiction</option>
				    <option value="Direct">Direct</option>
				</select>
			    </div>
			    <div class="form-group">
				<label for="corp_author_relationship_2">Relationship to resource:</label>
				<select id="corp_author_relationship_2" class="form-control">
				    <option selected="" value=""></option>
				    <option value="author">Author</option>
				    <option value="addressee">Addressee</option>
				    <option value="artist">Artist</option>
				    <option value="cartographer">Cartographer</option>
				    <option value="compiler">Compiler</option>
				    <option value="composer">Composer</option>
				    <option value="host institution">Host Institution</option>
				    <option value="issuing body">Issuing Body</option>
				    <option value="organizer">Organizer</option>
				    <option value="photographer">Photographer</option>
				    <option value="sponsoring body">Sponsoring Body</option>
				</select>
			    </div>
			</div>
			<label class="checkbox-inline" data-toggle="collapse" data-target="#corporate_author_collapse3">
			    <input type="checkbox"> Specify a third corporate author
			</label>
			<div id="corporate_author_collapse3" class="collapse">
			    <div class="form-group">
				<label for="corp_author_romanised_3">Corporate author (romanised form):</label>
				<input id="corp_author_romanised_3" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="corp_author_original_3">Corporate author (original script):</label>
				<input id="corp_author_original_3" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="corp_author_jurisdiction_3">Jurisdiction name or direct order:</label>
				<select id="corp_author_jurisdiction_3" class="form-control">
				     <option selected="" value=""></option>
				    <option value="Jurisdiction">Jurisdiction</option>
				    <option value="Direct">Direct</option>
				</select>
			    </div>
			    <div class="form-group">
				<label for="corp_author_relationship_3">Relationship to resource:</label>
				<select id="corp_author_relationship_3" class="form-control">
				    <option selected="" value=""></option>
				    <option value="author">Author</option>
				    <option value="addressee">Addressee</option>
				    <option value="artist">Artist</option>
				    <option value="cartographer">Cartographer</option>
				    <option value="compiler">Compiler</option>
				    <option value="composer">Composer</option>
				    <option value="host institution">Host Institution</option>
				    <option value="issuing body">Issuing Body</option>
				    <option value="organizer">Organizer</option>
				    <option value="photographer">Photographer</option>
				    <option value="sponsoring body">Sponsoring Body</option>
				</select>
			    </div>
			</div>
			<label class="checkbox-inline" data-toggle="collapse" data-target="#corporate_author_collapse4">
			    <input type="checkbox"> Specify a fourth corporate author
			</label>
			<div id="corporate_author_collapse4" class="collapse">
			    <div class="form-group">
				<label for="corp_author_romanised_4">Corporate author (romanised form):</label>
				<input id="corp_author_romanised_4" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="corp_author_original_4">Corporate author (original script):</label>
				<input id="corp_author_original_4" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="corp_author_jurisdiction_4">Jurisdiction name or direct order:</label>
				<select id="corp_author_jurisdiction_4" class="form-control">
				     <option selected="" value=""></option>
				    <option value="Jurisdiction">Jurisdiction</option>
				    <option value="Direct">Direct</option>
				</select>
			    </div>
			    <div class="form-group">
				<label for="corp_author_relationship_4">Relationship to resource:</label>
				<select id="corp_author_relationship_4" class="form-control">
				    <option selected="" value=""></option>
				    <option value="author">Author</option>
				    <option value="addressee">Addressee</option>
				    <option value="artist">Artist</option>
				    <option value="cartographer">Cartographer</option>
				    <option value="compiler">Compiler</option>
				    <option value="composer">Composer</option>
				    <option value="host institution">Host Institution</option>
				    <option value="issuing body">Issuing Body</option>
				    <option value="organizer">Organizer</option>
				    <option value="photographer">Photographer</option>
				    <option value="sponsoring body">Sponsoring Body</option>
				</select>
			    </div>
			</div>
			<label class="checkbox-inline" data-toggle="collapse" data-target="#meeting_author_collapse2">
			    <input type="checkbox"> Specify a second meeting name
			</label>
			<div id="meeting_author_collapse2" class="collapse">
			    <br>
			    <div class="form-group">
				<label for="meet_author_romanised_2">Meeting name (romanised form):</label>
				<input id="meet_author_romanised_2" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="meet_author_original_2">Meeting name (original script):</label>
				<input id="meet_author_original_2" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="meet_author_relationship_2">Relationship to resource:</label>
				<select id="meet_author_relationship_2" class="form-control">
				    <option selected="" value=""></option>
				    <option value="author">Author</option>
				    <option value="addressee">Addressee</option>
				    <option value="artist">Artist</option>
				    <option value="cartographer">Cartographer</option>
				    <option value="compiler">Compiler</option>
				    <option value="composer">Composer</option>
				    <option value="host institution">Host Institution</option>
				    <option value="issuing body">Issuing Body</option>
				    <option value="organizer">Organizer</option>
				    <option value="photographer">Photographer</option>
				    <option value="sponsoring body">Sponsoring Body</option>
				</select>
			    </div>
			</div>

			<hr>
			<div class="text-right" role="group">
			    <button type="button" class="btn btn-default btn-previous">Previous Step</button>
			    <button type="button" class="btn btn-success btn-next">Next Step</button>
			</div>
		    </div>

		    <!-- Page 4 -->
		    <div class="form-step" data-step="4">
			<div class="form-group">
			    <label for="edition_romanised">Edition (romanised form):</label>
			    <input id="edition_romanised" class="form-control" type="text">
			</div>
			<div class="form-group">
			    <label for="edition_original">Edition (original script):</label>
			    <input id="edition_original" class="form-control" type="text">
			</div>
			<div class="form-group">
			    <label for="pages">Pages:</label>
			    <input id="pages" class="form-control" type="text">
			</div>
			<div class="form-group">
			    <label for="illustrations">Illustrations:</label>
			    <input id="illustrations" class="form-control" type="text">
			</div>
			<div class="form-group">
			    <label for="content_type">Content type:</label>
			    <select id="content_type" class="form-control">
				<option selected="" value=""></option>
				<option value="cartographic image">Cartographic image</option>
				<option value="notated music">Notated music</option>
				<option value="still image">Still image</option>
				<option value="text">Text</option>
			    </select>
			</div>
			<div class="form-group">
			    <label for="second_content_type">Second content type:</label>
			    <select id="second_content_type" class="form-control">
				<option selected="" value=""></option>
				<option value="cartographic image">Cartographic image</option>
				<option value="notated music">Notated music</option>
				<option value="still image">Still image</option>
				<option value="text">Text</option>
			    </select>
			</div>
			<label class="checkbox-inline" data-toggle="collapse" data-target="#series-collapse">
			    <input type="checkbox"> This item is part of a series
			</label>
			<div id="series-collapse" class="collapse">
			    <br>
			    <div class="form-group">
				<label for="series_title_romanised">Series title (romanised form):</label>
				<input id="series_title_romanised" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="series_title_original">Series title (original script):</label>
				<input id="series_title_original" class="form-control" type="text">
			    </div>
			    <div class="form-group">
				<label for="number_in_series">Number in series:</label>
				<input id="number_in_series" class="form-control" type="text">
			    </div>
			</div>
			<hr>
			<div class="text-right" role="group">
			    <button type="button" class="btn btn-default btn-previous">Previous Step</button>
			    <button type="button" class="btn btn-success btn-next">Next Step</button>
			</div>
		    </div>

		    <!-- Page 5 -->
		    <div class="form-step" data-step="5">
			<div class="form-group">
			    <label for="country">Country of publication:</label>
			    <select id="country"></select>
			</div>
			<div class="form-group">
			    <label for="pub_place_romanised">Place of publication (romanised form):</label>
			    <input id="pub_place_romanised" class="form-control" type="text">
			</div>
			<div class="form-group">
			    <label for="pub_place_original">Place of publication (original script):</label>
			    <input id="pub_place_original" class="form-control" type="text">
			</div>
			<div class="form-group">
			    <label for="publisher_romanised">Publisher (romanised form):</label>
			    <input id="publisher_romanised" class="form-control" type="text">
			</div>
			<div class="form-group">
			    <label for="publisher_original">Publisher (original script):</label>
			    <input id="publisher_original" class="form-control" type="text">
			</div>
			<div class="form-group">
			    <label for="date_of_publication">Date of publication:</label>
			    <input id="date_of_publication" class="form-control" type="text">
			</div>
			<div class="form-group">
			    <label for="norm_date_of_publication">Normalised date of publication:</label>
			    <input id="norm_date_of_publication" class="form-control" type="text">
			</div>
			<hr>
			<div class="text-right" role="group">
			    <button type="button" class="btn btn-default btn-previous">Previous Step</button>
			    <button type="button" class="btn btn-success btn-next">Next Step</button>
			</div>
		    </div>

		    <!-- Page 6 -->
		    <div class="form-step" data-step="6">
			<div class="form-group">
			    <label for="first_subject">First subject:</label>
			    <select id="first_subject" class="subject"></select>
			</div>
			<div class="form-group">
			    <label for="second_subject">Second subject:</label>
			    <select id="second_subject" class="subject"></select>
			</div>
			<div class="form-group">
			    <label for="third_subject">Third subject:</label>
			    <select id="third_subject" class="subject"></select>
			</div>
			<div class="form-group">
			    <label for="fourth_subject">Fourth subject:</label>
			    <select id="fourth_subject" class="subject"></select>
			</div>
			<div class="form-group">
			    <label for="fifth_subject">Fifth subject:</label>
			    <select id="fifth_subject" class="subject"></select>
			</div>
			<hr>
			<div class="text-right" role="group">
			    <button type="button" class="btn btn-default btn-previous">Previous Step</button>
			    <button type="button" class="btn btn-success btn-next">Next Step</button>
			</div>
		    </div>

		    <!-- Page 7 -->
		    <div class="form-step" data-step="7">
			<div class="form-group">
			    <label for="comments">Comments:</label>
			    <textarea id="comments" class="form-control" rows="5"></textarea>
			</div>
			<hr>
			<div class="text-right" role="group">
			    <button type="button" class="btn btn-default btn-previous">Previous Step</button>
			    <button type="button" class="btn btn-success btn-answer" value="Done">
				<span class="fa fa-thumbs-o-up"></span> Done
			    </button>
			</div>
		    </div>
		</form>
	    </div>
	</div>

        <!-- Feedback items for the user -->
        <div class="padding-top-lg text-center">
            <p>You are working on task: <span class="label label-default" id="task-id">#</span></p>
            <div class="progress progress-striped">
                <div class="progress-bar" id="progress" rel="tooltip" role="progressbar" style="width: 0%;" title="#"></div>
            </div>
        </div>

    </div>
</div>

<script>
    /** Add tooltips and placeholders to each field. */
    (function() {
	let guidance = {
	    shelfmark:                 `If the card has a shelfmark transcribe it exactly as given, including upper and`
				       + ` lower-case letters and any punctuation and spaces.`,
	    isbn:                      `Record the ISBN if present, omitting any hyphens or spaces. If there is more`
				       + `than one ISBN, enter the one that most accurately identifies the item.`,
	    script_note:               `Add a note about the original script(s) if this would be important to the user.`,
	    language:                  `Enter the main language of the item.`,
	    multiple_languages:        `If there is more than one language, enter all additional languages.`,
	    language_note:             `If the item contains text in more than one language, enter a note on the`
				       + ` languages used in the resource.`,
	    title_romanised:           `Transcribe the title, capitalising only the first letter of the first word and`
				       + ` any proper nouns.`,
	    non_filing_romanised:      `If the title begins with an initial article or symbol enter the number of`
				       + ` letters plus one for any following space`,
	    title_original:            `If the title was a romanised version, give the original here.`,
	    non_filing_original:       `If the title begins with an initial article or symbol enter the number of`
				       + ` letters plus one for any following space`,
	    subtitle_romanised:        `If there is a subtitle, transcribe it here.`,
	    subtitle_original:         `If the subtitle was a romanised version, give the original here.`,
	    parallel_title_romanised:  `Transcribe a parallel title here. If there is more than one, add subsequent`
				       + ` titles seperated by &quot; = &quot;`,
	    parallel_title_original:   `If the parallel title was a romanised version, give the original here`,
	    pub_place_romanised:       `Transcribe the place of publication as it appears in the source. If more than`
				       + ` one place is given, only the first is required.`,
	    pub_place_original:        `If the place of publication was a romanised version, give the original here`,
	    publisher_romanised:       `Transcribe the publisher's name as it appears in the source. If a name is not`
	                               + ` given but can be ascertained from within or outside the resource include it`
				       + ` in square brackets.`,
	    publisher_original:        `If the publisher was a romanised version, give the original here.`,
	    normalised_pub_year:       `If the year of publication was given in Roman numerals or was in brackets,`
				       + ` supply a four-digit Arabic number with any uncertain digits given as`
				       + ` &quot;u&quot;. The  Gregorian calendar year should be converted from this and`
				       + ` still entered above.`,
	    date_of_publication:       `Transcribe the date as given, unless expressed as words (i.e. &quot;1980&quot;,`
				       + ` not &quot;Nineteen eighty&quot;). Do not convert Roman numbers to Arabic.`,
	    norm_date_of_publication:  `If the date of publication was given in Roman numerals or was in brackets, `
	                               + ` supply a four-digit Arabic number with any uncertain digits given as`
				       + ` &quot;u&quot;`,
	    country:                   `Enter the country of publication.`,
	    edition_romanised:         `Transcribe any edition statement exactly as it appears.`,
	    edition_original:          `If the edition was a romanised version, give the original here.`,
	    pages:                     `Record the number of pages. If cataloguing from a card do not use abbreviations`
	                               + ` if found: use the term &quot;pages&quot; instead of &quot;p.&quot; or`
				       + ` &quot;pp.&quot;.`,
	    illustrations:             `Record any illustrative content. Do not capitalise. If cataloguing from a card`
	                               + ` do not use abbreviations if found: use the term &quot;illustrations&quot;`
				       + ` instead of &quot;ill.&quot;.`,
	    content_type:              `Select the appropriate term for the content from the drop-down list provided`,
	    second_content_type:       `Select the appropriate term for the content from the drop-down list provided`
	                               + ` (e.g. still image). Please note: &quot;still image&quot; is used only when`
				       + ` describing a resource such as a comic, not when an item is mostly text with occasional`
				       + ` illustrations.`,
	    series_title_romanised:    `Transcribe any series title in romanised form, capitalising only the first`
	                               + ` letter and any proper nouns.`,
	    series_title_original:     `If the series title was a romanised version, give the original here.`,
	    number_in_series:          `Transcribe any series numbering, including any designation as given.`,
	    first_subject:             `Search for an appropriate subject heading`,
	    second_subject:            `Search for an appropriate subject heading`,
	    third_subject:             `Search for an appropriate subject heading`,
	    fourth_subject:            `Search for an appropriate subject heading`,
	    fifth_subject:             `Search for an appropriate subject heading`,
	    comments:                  `Please use this column to enter comments for British Library staff.`,
	    pers_author_romanised:     `Enter the romanised form of the name given on the card beginning with the `
				       + `surname/family name (if appropriate), followed by a comma and a space, then `
				       + `give all forenames seperated by spaces.`,
	    pers_author_original:      `If the personal author was a romanised version, give the original here.`,
	    pers_author_relationship:  `Select the appropriate designation from the dropdown list.`,
	    pers_author_fore_surname:  `Select an option from the dropdown box to indicate that either the name begins `
	                               + ` with a forename or a surname.`,
	    pers_author_romanised_2:   `Enter the romanised form of the name given on the card beginning with the `
				       + `surname/family name (if appropriate), followed by a comma and a space, then `
				       + `give all forenames seperated by spaces.`,
	    pers_author_original_2:    `If the personal author was a romanised version, give the original here.`,
	    pers_author_relationship_2:`Select the appropriate designation from the dropdown list.`,
	    pers_author_fore_surname_2:`Select an option from the dropdown box to indicate that either the name begins `
	                               + ` with a forename or a surname.`,
	    pers_author_romanised_3:   `Enter the romanised form of the name given on the card beginning with the `
				       + `surname/family name (if appropriate), followed by a comma and a space, then `
				       + `give all forenames seperated by spaces.`,
	    pers_author_original_3:    `If the personal author was a romanised version, give the original here.`,
	    pers_author_relationship_3:`Select the appropriate designation from the dropdown list.`,
	    pers_author_fore_surname_3:`Select an option from the dropdown box to indicate that either the name begins `
	                               + ` with a forename or a surname.`,
	    pers_author_romanised_4:   `Enter the romanised form of the name given on the card beginning with the `
				       + `surname/family name (if appropriate), followed by a comma and a space, then `
				       + `give all forenames seperated by spaces.`,
	    pers_author_original_4:    `If the personal author was a romanised version, give the original here.`,
	    pers_author_relationship_4:`Select the appropriate designation from the dropdown list.`,
	    pers_author_fore_surname_4:`Select an option from the dropdown box to indicate that either the name begins `
	                               + ` with a forename or a surname.`,
	    corp_author_romanised:     `Record the body's name given at the top left corder of the card. Do not include`
				       + ` any brackets.`,
	    corp_author_original:      `If the corporate author was a romanised version, give the original here.`,
	    corp_author_jurisdiction:  `Select from the dropdown box to indicate either that the name is structured as`
				       + ` a jurisdiction name (e.g. Australia. Department of Defence. Army Office) or`
				       + ` is entered in direct order (e.g. Malaysian Society of Microbiology).`,
	    corp_author_relationship:  `Select the appropriate designation from the dropdown list.`,
	    corp_author_romanised_2:   `Record the body's name given at the top left corder of the card. Do not include`
				       + ` any brackets.`,
	    corp_author_original_2:    `If the corporate author was a romanised version, give the original here.`,
	    corp_author_jurisdiction_2:`Select from the dropdown box to indicate either that the name is structured as`
				       + ` a jurisdiction name (e.g. Australia. Department of Defence. Army Office) or`
				       + ` is entered in direct order (e.g. Malaysian Society of Microbiology).`,
	    corp_author_relationship_2:`Select the appropriate designation from the dropdown list.`,
	    corp_author_romanised_3:   `Record the body's name given at the top left corder of the card. Do not include`
				       + ` any brackets.`,
	    corp_author_original_3:    `If the corporate author was a romanised version, give the original here.`,
	    corp_author_jurisdiction_3:`Select from the dropdown box to indicate either that the name is structured as`
				       + ` a jurisdiction name (e.g. Australia. Department of Defence. Army Office) or`
				       + ` is entered in direct order (e.g. Malaysian Society of Microbiology).`,
	    corp_author_relationship_3:`Select the appropriate designation from the dropdown list.`,
	    corp_author_romanised_4:   `Record the body's name given at the top left corder of the card. Do not include`
				       + ` any brackets.`,
	    corp_author_original_4:    `If the corporate author was a romanised version, give the original here.`,
	    corp_author_jurisdiction_4:`Select from the dropdown box to indicate either that the name is structured as`
				       + ` a jurisdiction name (e.g. Australia. Department of Defence. Army Office) or`
				       + ` is entered in direct order (e.g. Malaysian Society of Microbiology).`,
	    corp_author_relationship_4:`Select the appropriate designation from the dropdown list.`,
	    meet_author_romanised:     `Record the name of the conference, congress, symposium etc.`,
	    meet_author_original:      `If the meeting name was a romanised version, give the original here.`,
	    meet_author_relationship:  `Select the appropriate designation from the dropdown list.`,
	    meet_author_romanised_2:   `Record the name of the conference, congress, symposium etc.`,
	    meet_author_original_2:    `If the meeting name was a romanised version, give the original here.`,
	    meet_author_relationship_2:`Select the appropriate designation from the dropdown list.`,
	    state_of_res_romanised:    `Transcribe a name as given, including any text such as &quot;written by...&quot;`
				       + ` or &quot;edited by...&quot;.`,
	    state_of_res_original:     `If the statement of responsibility was a romanised version, give the original`
				       + ` here.`,
	    notes:		       `For damaged item notes, limited editions, items noted as donated etc.`,
	    author_type:               `Select the type of the main author.`
	};

	for (let key in guidance) {
	    let text = guidance[key].replace('\n', '').trim();
	    $(`#${key}`).attr('placeholder', text);
	    $(`label[for="${key}"`).after(` <span data-toggle="popover" data-content="${text}" class="fa fa-question-circle">
				</span>`);
	}
	$('[data-toggle="popover"]').popover({trigger: "hover"});
    })();


    /**Load Select2 controls.*/
    (function() {
	$.fn.select2.defaults.set("theme", "bootstrap");
	$.fn.select2.defaults.set("allowClear", true);
	$.fn.select2.defaults.set("width", "100%");

	$.getJSON( "https://cdn.rawgit.com/LibCrowds/marc-code-lists/master/countries.json", function(json) {
	    data = json;
	    data.unshift({id: "", text: ""}) // Add default
	    $("#country").select2({
		data: data,
		placeholder: $("#country").attr('placeholder'),
	    });
	}).fail(function(jqXHR, textStatus) {
	    pybossaNotify(`Select box error: ${textStatus}`, 'danger');
	});

	$.getJSON( "https://cdn.rawgit.com/LibCrowds/marc-code-lists/master/languages.json", function(json) {
	    data = json;
	    data.unshift({id: "", text: ""}) // Add default
	    $("#language").select2({
		data: data,
		placeholder: $("#language").attr('placeholder'),
	    });
	    $("#multiple_languages").select2({
		data: data,
		placeholder: $("#multiple_languages").attr('placeholder'),
	    });
	}).fail(function(jqXHR, textStatus) {
	    pybossaNotify(`Select box error: ${textStatus}`, 'danger');
	});

	// Subject data retrieved via AJAX
	$('.subject').each(function() {
	    let placeholder = $(this).attr('placeholder');
	    $(this).select2({
		placeholder: placeholder,
		ajax: {
		    url: 'https://fast.oclc.org/searchfast/fastsuggest',
		    dataType: 'jsonp',
		    cache: true,
		    data: function (params) {
			return {
			    query: params.term,
			    queryIndex: 'suggestall',
			    queryReturn: 'suggestall,idroot,auth,tag,type,raw,breaker,indicator',
			    suggest: 'autoSubject'
			};
		    },
		    processResults: function (data, params) {
			return {
			    results: $.map( data.response.docs, function (item) {
				return {
				    id: formatMARCString(item),
				    text: formatSuggestion(item),
				}
			    })
			};
		    },
		    minimumInputLength: 1,
		}
	    });
	});
    })();


    /** Collapse previous selection when author type radio buttons clicked. */
    $('input[name=author_type]').on('click', function() {
	$('#personal_author_collapse.in').collapse('toggle');
	$('#corporate_author_collapse.in').collapse('toggle');
	$('#meeting_author_collapse.in').collapse('toggle');
    });


    /** Format a subject heading suggestion. */
    function formatSuggestion(suggestion) {
	if (suggestion.type == 'alt') {
	    return suggestion.suggestall + ' - use ' + suggestion.auth;
	}
	return suggestion.auth;
    }


    /** Format a subject heading MARC string. */
    function formatMARCString(suggestion) {
	let base = suggestion.breaker || suggestion.raw || suggestion.auth;
	let tag = parseInt(suggestion.tag) + 500;
	return `${tag}  ${suggestion.indicator}7$a ${base}$2fast$0(OCoLC)${suggestion.idroot}`;
    }


    /** Key bindings. */
    $(window).on('keydown', function(evt) {
	let page = parseInt($('.form-step:visible').data('step'));

	// Hit enter to go to the next page or submit
	if (event.keyCode == 13) {
	    evt.preventDefault();
	    if (page == 7) {
	       $('.btn-answer').triggerHandler('click');
	    } else {
	      changePage(page + 1);
	    }
	}
    });


    /** Override default form submission behaviour. */
    $('form').submit(function() {
	return false;
    });


    /** Handle next page button click. */
    $('.btn-next').on('click', function(evt) {
	let page = parseInt($('.form-step:visible').data('step'));
	changePage(page + 1);
    });


    /** Handle previous page button click. */
    $('.btn-previous').on('click', function(evt) {
	let page = parseInt($('.form-step:visible').data('step'));
	changePage(page - 1);
    });


    /** Change page. */
    function changePage(i) {
	$('.form-step[data-step=' + (i - 1) + ']').slideUp();
	$('.form-step[data-step=' + (i + 1) + ']').slideUp();
	$('.form-step[data-step=' + i + ']').slideDown({
	    complete: function(){
		$("input:visible, textarea:visible").first().focus();
	    }
	});
	showProgress(i, 7);
    }


    /**Show task progress.*/
    function showProgress(page, totalPages) {
	let pct = Math.round((page * 100) / totalPages);
	$("#progress").css("width", pct.toString() + "%");
	$("#progress").attr("title", pct.toString() + "% of the task completed!");
	$("#progress").tooltip({'placement': 'bottom'});
    }


    /**Load the task.*/
    pybossa.taskLoaded(function(task, deferred) {
	if (!$.isEmptyObject(task)) {
	    let img = $('<img />');
	    img.load(function() {
		deferred.resolve(task);
	    });
	    img.attr('src', task.info.url_b + "?now=" + new Date().getTime());
	    img.addClass('img-thumbnail img-responsive');
	    task.info.image = img;
	} else {
	    deferred.resolve(task);
	    $("#image_container").hide();
	}
    });

    /**Present the task.*/
    pybossa.presentTask(function(task, deferred) {
	if (!$.isEmptyObject(task)) {
	    $('#photo-link').html('').append(task.info.image);
	    $("#photo-link").attr("href", task.info.link);
	    $('#task-id').html(task.id);
	    $('#transcription-form').trigger("reset");
	    $('.form-step:not(:first)').slideUp();
	    $('.form-step:first').slideDown();
	    showProgress(1, 7);

	    // The answer keys correspond to the spreadsheet template for loading data into Aleph
	    $('.btn-answer').off('click').on('click', function(evt) {
		if (typeof $(this).attr("value") != 'undefined') {

		    let multiple_languages = "";
		    if ($('#multiple_languages').val()) {
			multiple_languages = $('#multiple_languages').val().join();
		    }

		    task.answer = {
			shelfmark                                           : $("#shelfmark").val(),
			country                                             : $("#country").val(),
			language                                            : $("#language").val(),
			multiple_languages                                  : multiple_languages,
			language_note                                       : $("#language_note").val(),
			script_note                                         : $("#script_note").val(),
			isbn                                                : $("#isbn").val(),
			personal_author_in_romanised_form                   : $('#pers_author_romanised').val(),
			forename_or_surname_1                               : $('#pers_author_fore_surname').val(),
			relationship_to_resource_1                          : $('#pers_author_relationship').val(),
			authorised_name_1      	                            : $('#pers_author_romanised').val() ? "No" : "",
			personal_author_in_original_script                  : $('#pers_author_original').val(),
			corporate_author_in_romanised_form                  : $('#corp_author_romanised').val(),
			jurisdiction_name_or_direct_order_1                 : $('#corp_author_jurisdiction').val(),
			relationship_to_resource_2                          : $('#corp_author_relationship').val(),
			authorised_name_2                                   : $('#corp_author_romanised').val() ? "No" : "",
			corporate_author_in_original_script                 : $('#corp_author_original').val(),
			meeting_name_in_romanised_form                      : $('#meet_author_romanised').val(),
			relationship_to_resource_3                          : $('#meet_author_relationship').val(),
			authorised_name_3                                   : $('#meet_author_romanised').val() ? "No" : "",
			meeting_name_in_original_script                     : $('#meet_author_original').val(),
			title_in_romanised_form                             : $("#title_romanised").val(),
			non_filing_characters                               : $("#non_filing_romanised").val(),
			title_in_original_script                            : $("#title_original").val(),
			non_filing_characters_2                             : $("#non_filing_original").val(),
			remainder_of_title_in_romanised_form                : $("#subtitle_romanised").val(),
			remainder_of_title_in_original_script               : $("#subtitle_original").val(),
			parallel_title_in_romanised_form                    : $("#parallel_title_romanised").val(),
			parallel_title_in_original_script                   : $("#parallel_title_original").val(),
			statement_of_responsibility_in_romanised_form       : $('#state_of_res_romanised').val(),
			statement_of_responsibility_in_original_script      : $('#state_of_res_original').val(),
			other_title_in_romanised_form                       : "",
			other_title_in_original_script                      : "",
			edition_in_romanised_form                           : $("#edition_romanised").val(),
			edition_in_original_script                          : $("#edition_original").val(),
			place_of_publication_in_romanised_form              : $("#pub_place_romanised").val(),
			place_of_publication_in_original_script             : $("#pub_place_original").val(),
			publisher_in_romanised_form                         : $("#publisher_romanised").val(),
			publisher_in_original_script                        : $("#publisher_original").val(),
			date_of_publication                                 : $("#date_of_publication").val(),
			normalised_date_of_publication                      : $("#norm_date_of_publication").val(),
			pages                                               : $("#pages").val(),
			illustrative_content                                : $("#illustrations").val(),
			size                                                : "",
			content_type                                        : $("#content_type").val(),
			second_content_type                                 : $("#second_content_type").val(),
			series_title_in_romanised_form                      : $("#series_title_romanised").val(),
			series_title_in_original_script                     : $("#series_title_original").val(),
			number_in_series                                    : $("#number_in_series").val(),
			notes                                               : $('#notes').val(),
			subject                                             : $('#first_subject').val(),
			second_subject                                      : $('#second_subject').val(),
			third_subject                                       : $('#third_subject').val(),
			fourth_subject                                      : $('#fourth_subject').val(),
			fifth_subject                                       : $('#fifth_subject').val(),
			additional_personal_name_in_romanised_form          : $('#pers_author_romanised_2').val(),
			forename_or_surname_2                               : $('#pers_author_fore_surname_2').val(),
			relationship_to_resource_4                          : $('#pers_author_relationship_2').val(),
			authorised_name_4                                   : $('#pers_author_romanised_2').val() ? "No" : "",
			second_additional_personal_name_in_romanised_form   : $('#pers_author_romanised_3').val(),
			forename_or_surname_3                               : $('#pers_author_fore_surname_3').val(),
			relationship_to_resource_5                          : $('#pers_author_relationship_3').val(),
			authorised_name_5                                   : $('#pers_author_romanised_3').val() ? "No" : "",
			third_additional_personal_name_in_romanised_form    : $('#pers_author_romanised_4').val(),
			forename_or_surname_4                               : $('#pers_author_fore_surname_4').val(),
			relationship_to_resource_6                          : $('#pers_author_relationship_4').val(),
			authorised_name_6                                   : $('#pers_author_romanised_4').val() ? "No" : "",
			additional_personal_name_in_original_script         : $('#pers_author_original_2').val(),
			second_additional_personal_name_in_original_script  : $('#pers_author_original_3').val(),
			third_additional_personal_name_in_original_script   : $('#pers_author_original_4').val(),
			additional_corporate_name_in_romanised_form         : $('#corp_author_romanised_2').val(),
			jurisdiction_name_or_direct_order_2                 : $('#corp_author_jurisdiction_2').val(),
			relationship_to_resource_7                          : $('#corp_author_relationship_2').val(),
			authorised_name_7                                   : $('#corp_author_romanised_2').val() ? "No" : "",
			second_additional_corporate_name_in_romanised_form  : $('#corp_author_romanised_3').val(),
			jurisdiction_name_or_direct_order_3                 : $('#corp_author_jurisdiction_3').val(),
			relationship_to_resource_8                          : $('#corp_author_relationship_3').val(),
			authorised_name_8                                   : $('#corp_author_romanised_3').val() ? "No" : "",
			third_additional_corporate_name_in_romanised_form   : $('#corp_author_romanised_4').val(),
			jurisdiction_name_or_direct_order_4                 : $('#corp_author_jurisdiction_4').val(),
			relationship_to_resource_9                          : $('#corp_author_relationship_4').val(),
			authorised_name_9                                   : $('#corp_author_romanised_4').val() ? "No" : "",
			additional_corporate_name_in_original_script        : $('#corp_author_original_2').val(),
			second_additional_corporate_name_in_original_script : $('#corp_author_original_3').val(),
			third_additional_corporate_name_in_original_script  : $('#corp_author_original_4').val(),
			additional_meeting_name_in_romanised_form           : $('#meet_author_romanised_2').val(),
			relationship_to_resource_10                         : $('#meet_author_relationship_2').val(),
			authorised_name_10                                  : $('#meet_author_romanised_2').val() ? "No" : "",
			additional_meeting_name_in_original_script          : $('#meet_author_original_2').val(),
			comments                                            : $("#comments").val()
		    };

		    console.log(task.answer);

		    pybossa.saveTask(task.id, task.answer).done(function() {
			deferred.resolve();
			pybossaNotify('Answer saved!', 'success', true);
		    }).fail(function(xhr, status, error) {
			pybossaLogError(new Error(error));
		    });
		} else {
		    pybossaNotify('Submission error: Answer undefined', 'danger');
		}
	    });
	} else {
	    $(".skeleton").hide();
	    pybossaNotify('Congratulations! You have participated in all available tasks!', 'success');
	}
    });

    pybossa.run('transcribe-a-card');
</script>