<!doctype html>
<html class="demo">
	{% include head.html %}
	<body>
		{% include navbar.html %}

		<div class="container">

			<div class="form-group">
				<label for="default" class="control-label">Default textbox</label>
				<input id="default" type="text" class="form-control" placeholder="Placeholder text">
			</div>

			<div class="form-group">
				<label for="single" class="control-label">Select2 single select</label>
				<select id="single" class="form-control select2-single">
					<option></option>
					{% include select2-select.html %}
				</select>
			</div>

			<div class="form-group">
				<label for="multiple" class="control-label">Select2 multi select</label>
				<select id="multiple" class="form-control select2-multiple" multiple>
					{% include select2-select.html %}
				</select>
			</div>

			<div class="page-header">
				<h1 id="input-groups">Input Groups</h1>
			</div>

			<div class="form-group">
				<label for="select2-single-append" class="control-label">Select2 append Checkbox</label>
				<div class="input-group">
					<span class="input-group-addon">
						<input type="checkbox" checked>
					</span>
					<select id="select2-single-append" class="form-control select2-allow-clear">
						<option></option>
						{% include select2-select.html %}
					</select>
				</div>
			</div>

			<div class="form-group">
				<label for="single-append-radio" class="control-label">Select2 multi append Radiobutton</label>
				<div class="input-group">
					<span class="input-group-addon">
						<input type="radio">
					</span>
					<select id="single-append-radio" class="form-control select2-allow-clear" multiple>
						{% include select2-select.html %}
					</select>
				</div>
			</div>

			<div class="form-group">
				<label for="single-append-text" class="control-label">Select2 append</label>
				<div class="input-group">
					<select id="single-append-text" class="form-control select2-allow-clear">
						<option></option>
						{% include select2-select.html %}
					</select>
					<span class="input-group-btn">
						<button class="btn btn-default" type="button" data-select2-open="single-append-text">
							<span class="glyphicon glyphicon-search"></span>
						</button>
					</span>
				</div>
			</div>

			<div class="form-group">
				<label for="single-prepend-text" class="control-label">Select2 prepend</label>
				<div class="input-group">
					<span class="input-group-btn">
						<button class="btn btn-default" type="button" data-select2-open="single-prepend-text">
							<span class="glyphicon glyphicon-search"></span>
						</button>
					</span>
					<select id="single-prepend-text" class="form-control select2-single">
						<option></option>
						<option value="A">A</option>
						<option value="B">B</option>
						<option value="C">C</option>
					</select>
				</div>
			</div>

			<div class="form-group">
				<label for="multi-append" class="control-label">Select2 multi append</label>
				<div class="input-group">
					<select id="multi-append" class="form-control select2-multiple" multiple>
						<option></option>
						<option value="A">A</option>
						<option value="B">B</option>
						<option value="C">C</option>
					</select>
					<span class="input-group-btn">
						<button class="btn btn-default" type="button" data-select2-open="multi-append">
							<span class="glyphicon glyphicon-search"></span>
						</button>
					</span>
				</div>
			</div>

			<div class="form-group">
				<label for="multi-prepend" class="control-label">Select2 multi prepend</label>
				<div class="input-group">
					<span class="input-group-btn">
						<button class="btn btn-default" type="button" data-select2-open="multi-prepend">
							State
						</button>
					</span>
					<select id="multi-prepend" class="form-control select2-multiple" multiple>
						<option></option>
							{% include select2-select.html %}
					</select>
				</div>
			</div>

			<div class="form-group">
				<label for="multi-prepend-append" class="control-label">Select2 multi append + prepend</label>
				<div class="input-group">
					<span class="input-group-btn">
						<button class="btn btn-default" type="button" data-select2-open="multi-prepend-append">
							State
						</button>
					</span>
					<select id="multi-prepend-append" class="form-control select2-multiple" multiple>
						<option></option>
						{% include select2-select.html %}
					</select>
					<span class="input-group-addon">… is my favorite!</span>
				</div>
			</div>

			<div class="page-header">
				<h1 id="rtl-support-and-control-sizing">
					RTL Support and Bootstrap Control Sizing
				</h1>
			</div>

			<p>The theme offers styles to display "small" and "large" Select2 widgets in <a href="http://getbootstrap.com/components/#input-groups">Bootstrap Input Groups</a> with <a href="http://getbootstrap.com/css/#forms-control-sizes">Bootstrap Control Sizing</a> classes applied (e. g. Select2 in <code>.input-group.input-group-sm</code> or <code>.input-group.input-group-lg</code>). You may also apply the <a href="http://getbootstrap.com/css/#forms-control-sizes">Bootstrap Control Sizing</a> classes directly to the <code>.select2-container</code> to alter its appearance.</p>

			<div class="alert alert-info" role="alert">
				<h4>Requires select2.full.js</h4>
				<p>Those of you familiar with Select2 v3 remember that the default behavior was to copy the original elements CSS-classes to the container of the Select2 element. Select2 v4 provides a similar functionality in its full build, <a href="https://github.com/select2/select2/blob/master/dist/js/select2.full.js">select2.full.js</a>. It contains a compatibility module which behaves similar to v3 in copying CSS classes from the original <code>&lt;select&gt;</code> element. To invoke, set the <code>containerCssClass</code> option to <code>:all:</code>.</p>
			</div>

			<div class="row">
				<div class="col-md-4">
					<label for="select2-multiple-input-sm" class="control-label">col-md-4</label>
					<select id="select2-multiple-input-sm" class="form-control input-sm select2-multiple" multiple dir="rtl">
						{% include select2-select.html %}
					</select>
					<p class="help-block"><a href="https://select2.github.io/examples.html#rtl">RTL support</a> via <code>dir="rtl"</code></p>
				</div>
				<div class="col-md-3">
					<label for="select2-single-input-sm" class="control-label">col-md-3</label>
					<select id="select2-single-input-sm" class="form-control input-sm select2-single">
						{% include select2-select.html %}
					</select>
				</div>
				<div class="col-md-2">
					<label for="bootstrap-input-sm" class="control-label">Bootstrap input</label>
					<input id="bootstrap-input-sm" class="form-control input-sm" placeholder=".input-sm">
				</div>
				<div class="col-md-3">
					<div class="form-group has-success">
						<label for="select2-single-input-group-sm" class="control-label">col-md-3</label>
						<div class="input-group input-group-sm">
							<span class="input-group-addon">
								<input type="radio">
							</span>
							<select id="select2-single-input-group-sm" class="form-control select2-single">
								<option></option>
								{% include select2-select.html %}
							</select>
						</div>
					</div>
				</div>
			</div>



			<div class="row">
				<div class="col-md-4 has-warning">
					<label for="select2-multiple" class="control-label">col-md-4</label>
					<select id="select2-multiple" class="form-control select2-multiple" multiple>
						{% include select2-select.html %}
					</select>
					<p class="help-block">Example <a href="http://getbootstrap.com/css/#forms-help-text">block-level help text</a>.</p>
				</div>
				<div class="col-md-3">
					<label for="span_small" class="control-label">col-md-3</label>
					<select id="span_small" class="form-control select2-single">
						{% include select2-select.html %}
					</select>
				</div>
				<div class="col-md-2">
					<label for="span-medium">Bootstrap input</label>
					<input id="span-medium" class="form-control" placeholder=".col-md-2">
				</div>
				<div class="col-md-3">
					<div class="form-group">
						<label for="span_large" class="control-label">col-md-3</label>
						<div class="input-group">
							<span class="input-group-addon">
								<input type="checkbox" checked>
							</span>
							<select id="span_large" class="form-control select2-single">
								<option></option>
								{% include select2-select.html %}
							</select>
						</div>
					</div>
				</div>
			</div>



			<div class="row">
				<div class="col-md-4">
					<label for="select2-multiple-input-lg" class="control-label">col-md-4</label>
					<select id="select2-multiple-input-lg" class="form-control input-lg select2-multiple" multiple>
						{% include select2-select.html %}
					</select>
				</div>
				<div class="col-md-3">
					<label for="select2-single-input-lg" class="control-label">col-md-3</label>
					<select id="select2-single-input-lg" class="form-control input-lg select2-multiple" dir="rtl">
						{% include select2-select.html %}
					</select>
				</div>
				<div class="col-md-2">
					<label for="bootstrap-input-lg" class="control-label">Bootstrap input</label>
					<input id="bootstrap-input-lg" class="form-control input-lg" placeholder=".input-lg">
				</div>
				<div class="col-md-3">
					<div class="form-group has-error">
						<label for="select2-multiple-input-group-lg" class="control-label">col-md-3</label>
						<div class="input-group input-group-lg">
							<span class="input-group-addon">
								<input type="radio">
							</span>
							<select id="select2-multiple-input-group-lg" class="form-control select2-single">
								<option></option>
								{% include select2-select.html %}
							</select>
						</div>
					</div>
				</div>
			</div>

			<h2 id="horizontal-form-group-sizes">
				Horizontal form group sizes
			</h2>

			<p>The theme's styles work in <a href="http://getbootstrap.com/css/?#forms-horizontal">Bootstrap's Horizontal Forms</a> and offers support for <a href="http://getbootstrap.com/css/?#horizontal-form-group-sizes">Horizontal Form Group Sizes</a>, too.</p>

			<form class="form-horizontal">
				<div class="form-group form-group-lg">
					<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>

					<div class="col-sm-5">
						<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
					</div>

					<div class="col-sm-5">
						<select id="select2-button-addons-single-input-group-sm" class="form-control js-data-example-ajax">
							<option value="2126244" selected="selected">twbs/bootstrap</option>
						</select>
					</div>
				</div>

				<div class="form-group form-group-sm">
					<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>

					<div class="col-sm-5">
						<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
					</div>

					<div class="col-sm-5">
						<select id="select2-button-addons-single-input-group-sm" class="form-control js-data-example-ajax" dir="rtl">
							<option value="2126244" selected="selected">twbs/bootstrap</option>
						</select>
					</div>
				</div>

				<div class="form-group">
					<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
					<div class="col-sm-10">
						<select id="select2-button-addons-single-input-group-sm" class="form-control js-data-example-ajax" multiple>
							<option value="2126244" selected="selected">twbs/bootstrap</option>
							<option value="3620194" selected="selected">select2/select2</option>
						</select>
					</div>
				</div>

				<div class="form-group">
					<label for="inputPassword3" class="col-sm-2 control-label">Password</label>

					<div class="col-sm-10">
						<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
					</div>
				</div>

				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-10">
						<div class="checkbox">
							<label>
								<input type="checkbox"> Remember me
							</label>
						</div>
					</div>
				</div>

				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-10">
						<button type="submit" class="btn btn-default">Sign in</button>
					</div>
				</div>
			</form>

			<div class="page-header">
				<h1 id="inline-forms">
					Inline Forms
				</h1>
			</div>

			<div class="row">
				<div class="col-sm-12">
					<form class="form-inline">
						<div class="form-group">
							<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
							<div class="input-group">
								<div class="input-group-addon">$</div>
								<select class="form-control select2-single">
									<option></option>
									{% include select2-select.html %}
								</select>
								<div class="input-group-addon">.00</div>
							</div>
						</div>
						<button type="submit" class="btn btn-primary">Transfer cash</button>
					</form>
				</div>
			</div>

			<div class="row">
				<div class="col-sm-12">
					<form class="form-inline">
						<div class="form-group">
							<label class="sr-only" for="exampleInputEmail3">Email address</label>
							<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
						</div>
						<div class="form-group">
							<label class="sr-only" for="exampleInputPassword3">Password</label>
							<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
						</div>
						<select class="form-control select2-single">
							<option></option>
							{% include select2-select.html %}
						</select>
						<div class="checkbox">
							<label>
								<input type="checkbox"> Remember me
							</label>
						</div>
						<button type="submit" class="btn btn-default">Sign in</button>
					</form>
				</div>
			</div>

			<div class="page-header">
				<h1 id="button-addons">
					Button Addons
				</h1>
			</div>

			<p>Tests for Select2 widgets used in context with Bootstrap's <a href="http://getbootstrap.com/components/#input-groups-buttons">Button Addons</a>.</p>

			<div class="row">
				<div class="col-md-7">
					<label for="select2-button-addons-single-input-group-sm" class="control-label">Select2 custom data load</label>
					<div class="input-group input-group-sm">
						<div class="input-group-btn">
							<button class="btn btn-default" type="button" data-select2-open="select2-button-addons-single-input-group-sm">
								State
							</button>
						</div>
						<select id="select2-button-addons-single-input-group-sm" class="form-control js-data-example-ajax" dir="rtl">
							<option value="2126244" selected="selected">twbs/bootstrap</option>
						</select>
					</div>
				</div>
				<div class="col-md-5">
					<label for="select2-button-addons-multiple-input-group-sm" class="control-label">col-md-5</label>
					<div class="input-group input-group-sm">
						<span class="input-group-btn">
							<button class="btn btn-default" type="button" data-select2-open="select2-button-addons-multiple-input-group-sm">
								<span class="glyphicon glyphicon-search"></span>
							</button>
						</span>
						<select id="select2-button-addons-multiple-input-group-sm" class="form-control select2-multiple" multiple>
							{% include select2-select.html %}
						</select>
					</div>
				</div>
			</div>



			<div class="row">
				<div class="col-md-7">
					<label for="select2-button-addons-single-input-group" class="control-label">Select2 custom data load</label>
					<div class="input-group">
						<div class="input-group-btn">
							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
								Action <span class="caret"></span>
							</button>
							<ul class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li class="divider"></li>
								<li><a href="#">Separated link</a></li>
							</ul>
						</div>
						<select id="select2-button-addons-single-input-group" class="form-control js-data-example-ajax">
							<option value="3620194" selected="selected">select2/select2</option>
						</select>
					</div>
				</div>
				<div class="col-md-5">
					<label for="select2-input-group-append" class="control-label">col-md-5</label>
					<div class="input-group has-warning">
						<span class="input-group-btn">
							<button class="btn btn-default" type="button" data-select2-open="select2-input-group-append">
								<span class="glyphicon glyphicon-search"></span>
							</button>
						</span>
						<select id="select2-input-group-append" class="form-control select2-multiple" multiple>
							{% include select2-select.html %}
						</select>
					</div>
				</div>
			</div>



			<div class="row">
				<div class="col-md-7">
					<label for="select2-button-addons-single-input-group-lg" class="control-label">Select2 custom data load</label>
					<div class="input-group input-group-lg">
						<select id="select2-button-addons-single-input-group-lg" class="form-control js-data-example-ajax" multiple>
							<option value="2126244" selected="selected">twbs/bootstrap</option>
							<option value="3620194" selected="selected">select2/select2</option>
						</select>
						<span class="input-group-btn">
							<button class="btn btn-default" type="button" data-select2-open="select2-button-addons-single-input-group-lg">
								<span class="glyphicon glyphicon-search"></span>
							</button>
						</span>
					</div>
				</div>
				<div class="col-md-5">
					<label for="select2-button-addons-multi-input-group-lg" class="control-label">col-md-5</label>
					<div class="input-group input-group-lg">
						<span class="input-group-btn">
							<button class="btn btn-default" type="button" data-select2-open="select2-button-addons-multi-input-group-lg">
								<span class="glyphicon glyphicon-search"></span>
							</button>
						</span>
						<select id="select2-button-addons-multi-input-group-lg" class="form-control select2-multiple" multiple>
							{% include select2-select.html %}
						</select>
					</div>
				</div>
			</div>

			<div class="page-header">
				<h1 id="disabled-inputs">Disabled inputs and options</h1>
			</div>

			<p>The theme applies Bootstrap's styles for <a href="http://getbootstrap.com/css/#forms-control-states">disabled input elements</a> and for disabled dropdown options to the Select2 widgets and its options. Also see Select2's documentation on its "<a href="https://select2.github.io/examples.html#disabled">Disabled mode</a>".</p>

			<div class="row">
				<div class="col-md-6">
					<div class="form-group">
						<label for="select2-disabled-inputs-single" class="control-label">Select2 single</label>
						<div class="input-group">
							<span class="input-group-addon">
								<input type="checkbox">
							</span>
							<select id="select2-disabled-inputs-single" class="form-control select2-single" disabled>
								<option></option>
								{% include select2-select.html %}
							</select>
						</div>
					</div>
				</div>
				<div class="col-md-6">
					<div class="form-group">
						<label for="select2-disabled-inputs-multiple" class="control-label">Select2 multiple</label>
						<div class="input-group">
							<span class="input-group-addon">
								<input type="checkbox" checked>
							</span>
							<select id="select2-disabled-inputs-multiple" class="form-control select2-multiple" multiple>
								<option></option>
								{% include select2-select.html %}
							</select>
						</div>
					</div>
				</div>
			</div>

		</div>

		{% include footer.html %}

		{% include scripts.html %}
		<script src="js/bootstrap.min.js"></script>
		<script src="js/anchor.min.js"></script>
		<script>
			anchors.options.placement = 'left';
			anchors.add('.container h1, .container h2, .container h3, .container h4, .container h5');

			// Set the "bootstrap" theme as the default theme for all Select2
			// widgets.
			//
			// @see https://github.com/select2/select2/issues/2927
			$.fn.select2.defaults.set( "theme", "bootstrap" );

			var placeholder = "Select a State";

			$( ".select2-single, .select2-multiple" ).select2( {
				placeholder: placeholder,
				width: null,
				containerCssClass: ':all:'
			} );

			$( ".select2-allow-clear" ).select2( {
				allowClear: true,
				placeholder: placeholder,
				width: null,
				containerCssClass: ':all:'
			} );

			// @see https://select2.github.io/examples.html#data-ajax
			function formatRepo( repo ) {
				if (repo.loading) return repo.text;

				var markup = "<div class='select2-result-repository clearfix'>" +
					"<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
					"<div class='select2-result-repository__meta'>" +
						"<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

				if ( repo.description ) {
					markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
				}

				markup += "<div class='select2-result-repository__statistics'>" +
							"<div class='select2-result-repository__forks'><span class='glyphicon glyphicon-flash'></span> " + repo.forks_count + " Forks</div>" +
							"<div class='select2-result-repository__stargazers'><span class='glyphicon glyphicon-star'></span> " + repo.stargazers_count + " Stars</div>" +
							"<div class='select2-result-repository__watchers'><span class='glyphicon glyphicon-eye-open'></span> " + repo.watchers_count + " Watchers</div>" +
						"</div>" +
					"</div></div>";

				return markup;
			}

			function formatRepoSelection( repo ) {
				return repo.full_name || repo.text;
			}

			$( ".js-data-example-ajax" ).select2({
				width : null,
				containerCssClass: ':all:',
				ajax: {
					url: "https://api.github.com/search/repositories",
					dataType: 'json',
					delay: 250,
					data: function (params) {
						return {
							q: params.term, // search term
							page: params.page
						};
					},
					processResults: function (data, params) {
						// parse the results into the format expected by Select2
						// since we are using custom formatting functions we do not need to
						// alter the remote JSON data, except to indicate that infinite
						// scrolling can be used
						params.page = params.page || 1;

						return {
							results: data.items,
							pagination: {
								more: (params.page * 30) < data.total_count
							}
						};
					},
					cache: true
				},
				escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
				minimumInputLength: 1,
				templateResult: formatRepo,
				templateSelection: formatRepoSelection
			});

			$( "button[data-select2-open]" ).click( function() {
				$( "#" + $( this ).data( "select2-open" ) ).select2( "open" );
			});

			$( ":checkbox" ).on( "click", function() {
				$( this ).parent().nextAll( "select" ).prop( "disabled", !this.checked );
			});

			// copy Bootstrap validation states to Select2 dropdown
			//
			// add .has-waring, .has-error, .has-succes to the Select2 dropdown
			// (was #select2-drop in Select2 v3.x, in Select2 v4 can be selected via
			// body > .select2-container) if _any_ of the opened Select2's parents
			// has one of these forementioned classes (YUCK! ;-))
			$( ".select2-single, .select2-multiple, .select2-allow-clear, .js-data-example-ajax" ).on( "select2:open", function() {
				if ( $( this ).parents( "[class*='has-']" ).length ) {
					var classNames = $( this ).parents( "[class*='has-']" )[ 0 ].className.split( /\s+/ );

					for ( var i = 0; i < classNames.length; ++i ) {
						if ( classNames[ i ].match( "has-" ) ) {
							$( "body > .select2-container" ).addClass( classNames[ i ] );
						}
					}
				}
			});
		</script>
	</body>
</html>
