<form id=“widget-libros”>

<fieldset>
<div class="form-group">
  <input type="text" id="libros-title" class="form-control" placeholder="Title">
</div>
<div class="form-group">
  <input type="text" id="libros-author" class="form-control" placeholder="Author(s)">
</div>
<div class="form-group">
  <button type="submit">
    Search Openlibrary
  </button>
  <input type="reset" value="Reset">
</div>
<!-- Open Library results -->
<div id="libros-results" class="list-group">
<template id="template-book">

<div class=“row”>

<div class="libros-image-container pr-0">
</div>
<div class="col">
  <div class="libros-header">
    <h5 class="libros-title"></h5>
    <small class="libros-year"></small>
  </div>
  <p class="libros-author"></p>
  <small class="libros-publisher"></small>
</div>

</div>

</template>
</div>
<div class="form-group">
  <input type="text" id="libros-year" class="form-control" placeholder="Year">
</div>
<div class="form-group">
  <input type="text" id="libros-publisher" class="form-control" placeholder="Publisher(s)">
</div>
<div class="form-group">
  <input type="text" id="libros-image_url" class="form-control" placeholder="Image URL">
</div>
<div class="form-group">
  <input type="date" id="start_reading" class="form-control" placeholder="Start reading" data-toggle="datepicker">
</div>
<div class="form-group">
  <input type="date" id="end_reading" class="form-control" placeholder="End reading"  data-toggle="datepicker">
</div>
<pre class="highlight"><code class="language-txt" id="libros-yml"></code></pre>
<div class="form-group">
  <button type="button" class="btn btn-sm btn-outline-secondary" data-clipboard-target="#libros-yml">
    Copy to clipboard
  </button>
</div>
</fieldset>

</form>

<!– <form id=“input-form”>

      <h3>BOOK</h3>
      <div class="form-row">
              <div class="form-group col-md-6">
                      <input type="text" id="input-title" class="form-control" placeholder="Title">
              </div>
              <div class="form-group col-md-6">
                      <input type="text" id="input-author" class="form-control" placeholder="Author(s)">
                      <small>Author name or comma separated list</small>
              </div>
      </div>
      <div class="form-row">
              <div class="form-group col-md-12">
                      <button type="button" id="ol-search" class="btn btn-secondary">
                              Search Openlibrary
                      </button>
              </div>
      </div>
<div class="form-row" id="ol-results">
</div>
      <h3>DETAILS</h3>
      <div class="form-row">
              <div class="form-group col-md-6">
                      <input type="text" class="form-control" id="input-publishers" placeholder="Publisher(s)">
                      <small>Publisher or comma separated list</small>
              </div>
              <div class="form-group col-md-6">
                      <input type="text" class="form-control" id="input-publish_year" placeholder="Publish year">
              </div>
      </div>
      <div class="form-row">
              <div class="form-group col-md-6">
                      <input type="text" class="form-control" id="input-cover" placeholder="Cover URL">
              </div>
              <div class="form-group col-md-6">
                      <input type="text" class="form-control" placeholder="Subjects">
                      <small>Comma separated list</small>
              </div>
      </div>
      <div class="form-row">
              <div class="form-group col-md-6">
                      <input type="text" class="form-control" id="input-isbn" placeholder="ISBN">
              </div>
              <div class="form-group col-md-6">
                      <input type="text" class="form-control" id="input-edition_key" placeholder="Open Library key">
              </div>
      </div>
      <div class="form-row">
              <div class="form-group col-md-6">
                      <select class="form-control" id="Support">
                              <option>Book</option>
                              <option>Ebook</option>
                              <option>Audiobook</option>
                      </select>
                      <small class="form-text text-muted">Book support</small>
              </div>
              <div class="form-group col-md-6">
                      <div class="input-group">
                              <input type="text" class="form-control" aria-label="Text input with segmented button dropdown" placeholder="Price">
                              <div class="input-group-btn">
                                      <button type="button" id="button-currency" class="btn btn-outline-secondary">Currency $</button>
                                      <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                              <span class="sr-only">Toggle Dropdown</span>
                                      </button>
                                      <div class="dropdown-menu dropdown-menu-right">
                                              <a class="dropdown-item" data-currency="$" href="#">USD $</a>
                                              <a class="dropdown-item" data-currency="€" href="#">Euro €</a>
                                              <a class="dropdown-item" data-currency="£" href="#">Pound £</a>
                                      </div>
                              </div>
                      </div>
              </div>
      </div>
      <h3>READING</h3>
      <div class="form-row">
              <div class="form-group col-md-6">
                      <input type="text" class="form-control" placeholder="Date" data-toggle="datepicker">
                      <small>Start reading</small>
              </div>
              <div class="form-group col-md-6">
                      <input type="text" class="form-control" placeholder="Date"  data-toggle="datepicker">
                      <small>End reading</small>
              </div>
      </div>
      <div class="form-row">
              <div class="form-group col-md-6">
                      <input type="text" class="form-control" placeholder="Category">
                      <small>Your categories, manage from <a href="#">Categories</a> page</small>
              </div>
              <div class="form-group col-md-6">
                      <div class="dropdown show">
                              <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                      Not rated yet
                              </a>
                              <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                      <a class="dropdown-item" href="#">☆☆☆☆☆</a>
                                      <a class="dropdown-item" href="#">★☆☆☆☆</a>
                                      <a class="dropdown-item" href="#">★★☆☆☆</a>
                                      <a class="dropdown-item" href="#">★★★☆☆</a>
                                      <a class="dropdown-item" href="#">★★★★☆</a>
                                      <a class="dropdown-item" href="#">★★★★★</a>
                              </div>
                      </div>
              </div>
      </div>
      <div class="form-row">
              <div class="form-group col-md-12">
                      <textarea class="form-control" placeholder="Review" rows="3"></textarea>
              </div>
      </div>
      <div class="form-row">
              <div class="form-group col-md-6">
                      <div class="form-check">
                              <label class="form-check-label">
                                      <input type="checkbox" class="form-check-input"> Recommended
                              </label>
                      </div>
              </div>
              <div class="form-group col-md-6">
                      <div class="form-check">
                              <label class="form-check-label">
                                      <input type="checkbox" class="form-check-input"> Difficult
                              </label>
                      </div>
              </div>
      </div>

</form> –>