<?php
echo "<div class=\"flex-container\">";
    echo "<div class=\"sbook_left_column\">\n";
  if (!empty(trim($activity->activity_icon)))  {
        echo "<div class=\"sbook_activity_icon".$uniq_div_from_activity_title."\"> &nbsp; ".$activity->activity_title."</div>";
?>

<style>
div.sbook_activity_icon<?php echo $uniq_div_from_activity_title ?>::before {content: "";
background : url(<?php echo $activity->activity_icon ?>) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
div.sbook_activity_icon<?php echo $uniq_div_from_activity_title ?> {
max-width : 80%;
line-height: 2em;
margin-left: 1%;
padding-top: 1.2em;
padding-left: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-overflow: ellipsis;
word-wrap: break-word; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align :center;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #ababad;
}
</style>

<?php

  }
  else {     echo "<div class=\"sbook_construction\"> &nbsp; ".$activity->activity_title."</div>";
  }
    echo "</div><!-- end sbook_left_column -->\n";

    echo "<div class=\"sbook_middle_right_column\">\n";
    echo "<pre class=\"sbook_lesson_plan\">";

        echo "<span class=\"sbook_exercise_no\">".$clog_activity->activity_id."</span> <span class=\"sbook_instructions\">".$clog_activity->instructions."</span>";
  $instructions_demo = trim($clog_activity->instructions_demo);
  if (!empty($clog_activity->instructions_demo))  {
    echo "<div class=\"sbook_instructions_demo\">".$clog_activity->instructions_demo."</div>";
  }
echo "<br />";

//
$activity = $clog_activity;
    include ('js/swap_divs_w_click.js');
echo "<div id=\"swapper-first_".$uniq_div_from_activity_title."\" style=\"display:block;\">";
    echo "<div class=\"movable_match_2_columns_aa\"><!-- use aa for 40% -->\n";
echo "<a href=\"javascript:SwapDivsWithClick('swapper-first_".$uniq_div_from_activity_title."','swapper-other_".$uniq_div_from_activity_title."')\"><img src=\"pix/icons8-hand-with-pen-100.png\" width=\"35em\" border=\"0\" alt=\"Prepare\" />  Prepare</a>\n";

        echo "<ol>";
foreach($activity->qa as $qa) { 
if (trim($qa->qs) != null) {
  echo "<li>".$qa->qs."</li>";
  //include ('inc/xml_show_definition.inc');
if ($qa->ans != null) {
  echo "<span class=\"show_key_sbook\">".$qa->ans."</span>\n";
}
if (trim($qa->hint) != null) {
echo "<span style=\"font-style: italic; font-size: 75%;\">".$qa->hint."</span>";
}
echo "<br />\n";
}
} // if (trim($qa->qs) != null)
        echo "</ol>";

echo "</div><!-- end class match 2 columns_aa -->\n";
echo "</div><!-- end swapper first -->\n";
//
// DISPLAY (hidden by default)
echo "<div id=\"swapper-other_".$uniq_div_from_activity_title."\" style=\"display:none; float: left; position: fixed; bottom: 55%; margin-left: 40%; z-index: 1000; width: 25%;\">\n"; // 20210409-0026

///    include ('sbook_plugins/take_notes_floating01.inc');
//take_notes_floating01_qs_and_ans.inc
  echo "<div id=\"empty_div2mov_cards".$uniq_div_from_activity_title."\">\n"; // mov div
  echo "<div style=\"background-color: #cdcdcd;\" id=\"div2mov_cards".$uniq_div_from_activity_title."\">\n"; // mov div
       echo "<div class=\"moved_match_2_columns_aa\"><!-- use aa for 40% -->\n";
  echo "<div align=\"center\"><div class=\"tooltip2\"><h2> 〆 </h2><div class=\"tooltiptext2\"><a style=\"color: white; text-decoration: none;\" href=\"javascript:SwapDivsWithClick('swapper-first_".$uniq_div_from_activity_title."','swapper-other_".$uniq_div_from_activity_title."')\"> Close notes (without saving)</a></div></div> ";

//echo "<div class=\"tooltip2\"><label for=\"fileToLoad".$uniq_div_from_activity_title."\" class=\"sbook_btn_browse\"><div class=\"tooltiptext2\">Browse</div></label><input id=\"fileToLoad".$uniq_div_from_activity_title."\" type=\"file\"/></div><div class=\"tooltip2\"><button class=\"sbook_btn_load_file\" onclick=\"loadFileAsText".$uniq_div_from_activity_title."()\"><div class=\"tooltiptext2\">Load selected file</div></button></div><div class=\"tooltip2\"><div class=\"tooltiptext2\">Save as:<input id=\"inputFileNameToSaveAs".$uniq_div_from_activity_title."\" placeholder=\"".`date +%Y%m%d`."_{$sbook_ref}_notes_{$member}.txt\"></div></div> <div class=\"tooltip2\"><button class=\"sbook_btn_save\" onclick=\"saveTextAsFile".$uniq_div_from_activity_title."()\"><div class=\"tooltiptext2\">Save text to file</div></button></div>\n";
echo "<div class=\"tooltip2\"><div class=\"tooltiptext2\">Save as:<input id=\"inputFileNameToSaveAs".$uniq_div_from_activity_title."\" placeholder=\"".`date +%Y%m%d`."_{$sbook_ref}_notes_{$member}.txt\"></div></div> <div class=\"tooltip2\"><button class=\"sbook_btn_save\" onclick=\"saveTextAsFile".$uniq_div_from_activity_title."()\"><div class=\"tooltiptext2\">Save text to file</div></button></div>\n";

echo "</div>\n"; // close align centre

echo "<textarea id=\"inputTextToSave".$uniq_div_from_activity_title."\" style=\"font-size: 140%; width: 100%; height: 100%;\">".$sbook_ref."\n".`date +%Y%m%d`.$activity->activity_title."\n\n";

//  echo $activity->activity_contents;

echo "Use the following:\n"; // suggested answers
foreach($activity->qa as $qa) { 
  //echo "<li>".$qa->qs."</li>";
  echo "- ".$qa->ans;
}
echo "\n-------------------------------------------\n";

foreach($activity->qa as $qa) { 
  //echo "<li>".$qa->qs."</li>";
  echo $qa->qs."\n\n";
}

echo "</textarea><br />\n";
echo "</div><!-- end match 2 columns -->\n";
echo "</div><!-- end div2mov -->\n"; // end mov div
echo "</div><!-- end empty div2mov-->\n"; // end empty mov div

echo "</div><!-- end swap other -->\n";

$activity_id = trim(preg_replace("/[^\da-z]/i", '_',$activity->activity_id));
$activity_title = trim(preg_replace("/[^\da-z]/i", '_',$activity->activity_title));
$fileNameToSaveAs = $sbook_ref."_".$activity_id."_".$activity_title."_notes_".$member."_".date('Ymd_His').".txt";
include ('js/save_text_as_file_w_uniq_div_from_activity_title.js');

echo "<style>\n";
echo "#empty_div2mov_cards".$uniq_div_from_activity_title." {\n";
echo "position: relative;\n";
//echo "top: 2em;";
echo "width: 100%;";
//echo "max-height: 20%;"; 
//echo "max-height: 20%;"; 
echo "padding: 0.1em;\n";
echo "}\n";

echo "#div2mov_cards".$uniq_div_from_activity_title." {\n";
echo "z-index: 9;\n";
echo "position: absolute;\n";
//echo "bottom: 5%;";
echo "top: -14em;";
echo "left: -62%; /* -65% -16em; */";
echo "width: 170%;";
echo "display: inline-block;\n";
echo "box-shadow: 0px 0px 4px 2px #052a3a;\n";
echo "resize: both;";
echo "height: 35em; /*35em;*/"; 
echo "overflow-y: scroll;"; 
echo "}\n";

// Can't hide scrollbars in Firefox...
// Hide scrollbar for Chrome, Safari and Opera 
echo "#div2mov_cards".$uniq_div_from_activity_title."::-webkit-scrollbar {";
echo "display: none;";
echo "}\n";
// Hide scrollbar for IE and Edge
echo "#div2mov_cards".$uniq_div_from_activity_title." {";
echo "ms-overflow-style: none;";
echo "}\n";

echo "</style>\n";

echo "<script>\n";
echo"dragElement(document.getElementById(('div2mov_cards".$uniq_div_from_activity_title."')));";
include ('js/div2mov_cards.js');
echo "</script>\n";

//
    echo "</pre>";
    echo "</div><!-- end sbook_middle_right_column -->\n";
echo "</div> <!-- end flex-container -->\n";
?>
