<?php
   session_start();
   // if(!isset($_SESSION["GSB-User"]) || $_SESSION["GSB-User"] == 0) header("Location: login.php");
?>
<!DOCTYPE HTML>

<html lang="hr">

   <head>

      <!--
       ________  _____            __________  _____    ________ 
      /   __   \/  _  \           \____    / /  _  \  /  _____/ 
      \____    /  /_\  \   ______   /     / /  /_\  \/   \  ___ 
         /    /    |    \ /_____/  /     /_/    |    \    \_\  \
        /____/\____|__  /         /_______ \____|__  /\______  /
                      \/                  \/       \/        \/ 
      -->

      <title>9A - GUITAR SONG BOOK</title>

      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

      <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto">
      <link rel="stylesheet" type="text/css" href="/global-resources/fonts/FontAwesome/fontawesome-pro-5.4.1-web/css/all.min.css">
      <link rel="stylesheet" type="text/css" href="resources/artist-song.css?v=<?php echo time(); ?>" />
      <link rel="stylesheet" type="text/css" href="resources/modal-window.css?v=<?php echo time(); ?>" />

      <script>
          if(!window.frameElement) window.top.location.href="https://www.9a-zag.com/webs/guitar_song_book/gsb-index.php";
      </script>

      <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

      <script type="text/javascript" src="resources/modal-window.js?v=<?php echo time(); ?>"></script>
      <script type="text/javascript" src="resources/artist-song-events.js?v=<?php echo time(); ?>"></script>
      <script type="text/javascript" src="resources/artist-song.js?v=<?php echo time(); ?>"></script>
<!--
-->
   </head>

   <body class="noselect">
      <div id="EditWrapper">
         <div class="SectionMarker" id="SectionMarkerLetters"><i class="fas fa-caret-down"></i></div>
         <div id="Letters" class="KeyboardON1R"></div>
         <div class="SectionMarker" id="SectionMarkerArtists"><i class="fas fa-caret-down"></i></div>
         <div id="ArtistToolbar" class="KeyboardON1R">
            <button id="ArtistAdd"><i class="fas fa-plus-circle"></i></button>
            <button id="ArtistEdit"><i class="fas fa-pencil"></i></button>
            <button id="ArtistDelete"><i class="fas fa-trash-alt"></i></button>
         </div>
         <div id="Artists" class="KeyboardON2R"></div>
         <div id="ArtistAddEditDelete" class="KeyboardON2R">
            <div id="ArtistMessage"></div>
            <div id="DeleteArtist" class="AED-A">
               <span id="ArtistDeleteShow"></span>
               <div class="buttons">
                  <button id="CancelDeleteArtist" class="ArtistCancel"><i class="fas fa-chevron-circle-left"></i><br /><span>CANCEL</span></button>
                  <button id="ConfirmDeleteArtist" data-job="DELETE"><i class="fas fa-trash-alt"></i><br /><span>DELETE</span></button>
               </div>
            </div>
            <div id="AddArtist" class="AED-A">
               <input type="text" id="ArtistAddInput" placeholder="Add artist name..." value="" autocomplete="off" />
               <div class="buttons">
                  <button id="CancelAddArtist" class="ArtistCancel"><i class="fas fa-chevron-circle-left"></i><br /><span>CANCEL</span></button>
                  <button id="ConfirmAddArtist" data-job="ADD"><i class="fas fa-check-circle"></i><br /><span>SAVE</span></button>
               </div>
            </div>
            <div id="EditArtist" class="AED-A">
               <input type="text" id="ArtistEditInput" placeholder="Add artist name..." value="" autocomplete="off" />
               <div class="buttons">
                  <button id="CancelEditArtist" class="ArtistCancel"><i class="fas fa-chevron-circle-left"></i><br /><span>CANCEL</span></button>
                  <button id="ConfirmEditArtist" data-job="EDIT"><i class="fas fa-check-circle"></i></i></i><br /><span>SAVE</span></button>
               </div>
            </div>
         </div>
         <div class="SectionMarker" id="SectionMarkerSongs"><i class="fas fa-caret-down"></i></div>
         <div id="SongToolbar" class="KeyboardON1R">
            <button id="SongTune"><i class="fab fa-itunes-note"></i></button>
            <button id="SongAdd"><i class="fas fa-plus-circle"></i></button>
            <button id="SongEdit"><i class="fas fa-pencil"></i></button>
            <button id="SongDelete"><i class="fas fa-trash-alt"></i></button>
         </div>
         <div id="Songs" class="KeyboardON2R"></div>
         <div id="SongAddEditDelete" class="KeyboardON2R">
            <div id="SongMessage"></div>
            <div id="DeleteSong" class="AED-S">
               <span id="SongDeleteShow"></span>
               <div class="buttons">
                  <button id="CancelDeleteSong" class="SongCancel"><i class="fas fa-chevron-circle-left"></i><br /><span>CANCEL</span></button>
                  <button id="ConfirmDeleteSong" data-job="DELETE"><i class="fas fa-trash-alt"></i><br /><span>DELETE</span></button>
               </div>
            </div>
            <div id="AddSong" class="AED-S">
               <input type="text" id="SongAddInput" placeholder="Add song name..." value="" autocomplete="off" />
               <input type="text" id="YTIDAddInput" placeholder="Set YouTube ID..." value="" autocomplete="off" />
               <div class="buttons">
                  <button id="CancelAddSong" class="SongCancel"><i class="fas fa-chevron-circle-left"></i><br /><span>CANCEL</span></button>
                  <button id="ConfirmAddSong" data-job="ADD"><i class="fas fa-check-circle"></i><br /><span>SAVE</span></button>
               </div>
            </div>
            <div id="EditSong" class="AED-S">
               <input type="text" id="SongEditInput" placeholder="Add song name..." value="" autocomplete="off" />
               <input type="text" id="YTIDEditInput" placeholder="Set YouTube ID..." value="" autocomplete="off" />
               <div class="buttons">
                  <button id="CancelEditSong" class="SongCancel"><i class="fas fa-chevron-circle-left"></i><br /><span>CANCEL</span></button>
                  <button id="ConfirmEditSong" data-job="EDIT"><i class="fas fa-check-circle"></i></i></i><br /><span>SAVE</span></button>
               </div>
            </div>
         </div>
      </div> <!-- EDIT WRAPPER -->
   </body>

</html>