<div class="reading_menu_logo_container">
  <a href="/">
    <img
      src="{{ url_for('static', filename='img/lute.png') }}"
      class="lutelogo_small"
      style="cursor: pointer"
    />
  </a>
  <!-- <h2>Lute</h2> -->
  <button class="close-btn reading-menu-close-btn" onclick="closeMenu()"></button>
</div>

<div id="focus-container">
  <label for="focus">Focus mode</label>
  <input type="checkbox" name="focus" id="focus">
</div>

<div class="text-options-container">
  <div class="text-options-btn-container">
    <button class="text-options-button font-minus" title="Decrease font size"></button>
    <button class="text-options-button font-plus" title="Increase font size"></button>
  </div>
  <div class="text-options-btn-container">
    <button class="text-options-button lh-minus" title="Decrease line height"></button>
    <button class="text-options-button lh-plus" title="Increase line height"></button>
  </div>
  <div class="text-options-btn-container">
    <button class="text-options-button width-minus" title="Decrease content width"></button>
    <button class="text-options-button width-plus" title="Increase content width"></button>
  </div>
  <div class="text-options-btn-container">
    <button class="text-options-button column-one" title="One column text"></button>
    <button class="text-options-button column-two" title="Two column text"></button>
  </div>
</div>

<ul>
  {% if book.source_uri %}
  <li>
    <a class="reading-menu-item" href="{{ book.source_uri }}" target="_blank" tabindex="-1">
      <span>Show source URL</span>
    </a>
  </li>
  {% endif %}
  <li id="page-operations-li" class="reading-menu-item">
    <span id="page-operations-title">Edit</span>
    <div id="page-operations-menu">
      <ul>
        <li>
          <a id="editText" class="reading-menu-item" href="" onclick="edit_current_page(); return false;" title="Edit current page content">
            Edit current page
          </a>
        </li>
        <li>
          <a id="readmenu_add_page_after" class="reading-menu-item" href="" onclick="add_page_after(); return false;" title="Add page after current page">
            Add page after
          </a>
        </li>
        <li>
          <a id="readmenu_add_page_before" class="reading-menu-item" href="" onclick="add_page_before(); return false;" title="Add page before current page">
            Add page before
          </a>
        </li>
        <li>
          <a id="readmenu_delete_page" class="reading-menu-item" href="" onclick="delete_current_page(); return false;" title="Delete current page">
            Delete current page
          </a>
        </li>
      </ul>
    </div>
  </li>
  <li>
    <a id="translateText" class="reading-menu-item" href="" onclick="show_page_translation(); return false;">
      Translate page
    </a>
  </li>
  <li>
    <a id="next_theme" class="reading-menu-item" onclick="next_theme(); return false;" title="Next theme">
      Next theme (m)
    </a>
  </li>
  <li>
    <a id="toggle_highlights" class="reading-menu-item" onclick="toggle_highlight(); return false;" title="Toggle highlights">
      Toggle highlights (h)
    </a>
  </li>
  <li>
    <a id="keyboard_shortcuts" class="reading-menu-item" title="Keyboard shortcuts"
       href="/hotkeys"
       target="_blank">
      Keyboard shortcuts
    </a>
  </li>
</ul>
