<?php
    session_start();
    
    if(isset($_SESSION['userlogin'], $_SESSION['userfirstname'])) {
        $email = $_SESSION['userlogin'];
        $name = $_SESSION['userfirstname'];
    }
    
    if(isset($_SESSION['canvas_id'])) {
        $canvas_id = $_SESSION['canvas_id'];
    }
?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Brainstorm about the ethical implications of your project and represent them in a canvas.">
        <meta name="keywords" content="ethics canvas, ethics, social entrepreneurship, research, innovation, privacy, business development, business model canvas, open source tools">
        <title>The Ethics Canvas</title>
        
        <!-- Favicon -->
        <link rel="icon" href="../icon/favicon.ico" />
        
        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
        <!-- Google font -->
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" />
        <!-- App style -->
        <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="css/canvas.css" />
        
        <!-- PHP variables have to be retieved here as js variable -->
        <script type="text/javascript">
            var email_save_canvas = '<?php echo $email; ?>';
            var user_save_canvas = '<?php echo $name; ?>';
            var current_canvas_id = '<?php echo $canvas_id; ?>';
        </script>
    </head>
    <body>
        
        <div class="container-fluid">
            
            <form class="canvas-form form" action="mpdf/canvas-pdf.php" method="post" target="_blank">
                <!-- Username -->
                <input type="hidden" name="canvas_id" value="<?php echo($canvas_id) ?>" />
                <input type="hidden" name="username" value="<?php echo($email) ?>" />
                
                <!-- Canvas Form Header -->
                <div class="form-header row text-center">
                    <div class="col-md-3">
                        <!-- Logo -->
                        <h1 class="page_title">
                            <a class="logo" href="../index.html">
                                <img src="icons/logo-black-text.svg" alt="Online Ethics Canvas" />
                            </a>
                        </h1>
                    </div>
                    <div class="col-md-3 ">
                        <label class="project_title">Project Title</label>
                        <input class="proj_title" name="field_00[]" type="text"/>
                    </div>
                    <div class="col-md-3 ">
                        <label class="project_date">Date</label>
                        <input class="proj_date" name="field_00[]" type="date"/>
                    </div>
                    <!-- Log in -->
                    <div class="col-md-3 ">
                        <?php if(!empty($name)) { ?>
                        <!-- Bootstrap dropdown component -->
                        <div class="dropdown user-profile">
                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                <img src="../icon/profile.svg"/><span><?php echo $name; ?></span>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                <li><a id="toDashboard" href="php/dashboard.php">Your Canvases</a></li>
                                <!-- <li><a href="#">Something else here</a></li> -->
                                <li role="separator" class="divider"></li>
                                <li><a id="logout" href="#">Log Out</a></li>
                            </ul>
                        </div>
                        <?php } ?>
                    </div>
                    <!-- Collaborators -->
                    <div class="col-md-3">
                        <?php if(!empty($name)) { ?>
                        <!-- Bootstrap dropdown component -->
                        <div class="dropdown collaborators">
                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1">
                            <!-- <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> -->
                                <img src="../icon/collaborators.svg" alt="collaborators" /><span>Collaborators (0 active)</span>
                                <!-- <span class="caret"></span> -->
                            </button>
                        </div>
                        <?php } ?>
                    </div>
                </div>
                
                <!-- Jump to -->
                <div class="jump-to-click-area">&nbsp;</div>
                <div class="jump-to row">
                    <div class="col-s-12">
                        <label><img class="jump-to-img jump-to-arrow-0" src="icons/glyphicon-chevron-right.gif" />Jump to...</label>
                        <!-- <a href="#"><label class="jump_to"><span class="jump-to-arrow glyphicon glyphicon-chevron-right"></span> Jump to...</label></a> -->
                        <div class="jump-to-list">
                            <hr />
                            <ul>
                                <li>
                                    <a href="#row_saved_tags">Saved Tags for This Canvas</a>
                                </li>
                                <li>
                                    <a href="#panel_01">1.&nbsp;&nbsp;Individuals Affected</a>
                                </li>
                                <li>
                                    <a href="#panel_02">2.&nbsp;&nbsp;Groups Affected</a>
                                </li>
                                <li>
                                    <a href="#panel_03">3.&nbsp;&nbsp;Behaviour</a>
                                </li>
                                <li>
                                    <a href="#panel_04">4.&nbsp;&nbsp;Relations</a>
                                </li>
                                <li>
                                    <a href="#panel_05">5.&nbsp;&nbsp;Worldviews</a>
                                </li>
                                <li>
                                    <a href="#panel_06">6.&nbsp;&nbsp;Group Conflicts</a>
                                </li>
                                <li>
                                    <a href="#panel_07">7.&nbsp;&nbsp;Product or Service Failure</a>
                                </li>
                                <li>
                                    <a href="#panel_08">8.&nbsp;&nbsp;Problematic Use of Resources</a>
                                </li>
                                <li>
                                    <a href="#panel_09">9.&nbsp;&nbsp;What can we do?</a>
                                </li>
                                <li>
                                    <a href="#panel_10">10.&nbsp;&nbsp;Uncategorised ideas</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <!-- Saved Tags for This Canvas -->
                <div class="saved-tags row" id="row_saved_tags">
                    <div class="col-s-12">
                        <label>Saved Tags for This Canvas</label>
                        <p>You haven't added any tags yet.</p>
                    </div>
                </div>
                
                <!-- LAYOUT -->
                <!-- ================ 7/5 col ================ -->
                <div class="canvas-box">
                    <div class="masonry-layout7-5" id="7-5-col-layout">
                        <div class="masonry-layout__panel" id="panel_01">
                            <div class="card field_01 masonry-layout__panel-content bg--purple">
                                <h2 class="field-title">
                                    <!-- FIELD -->
                                    <a href="#" data-toggle="tooltip" data-placement="left" title="Who use your product or service? Who are affected by it’s use? Are they men/women, of different ages, etc?"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>Individuals Affected&nbsp;&nbsp;
                                </h2>
                                <!--
                                <p class="intro">
                                    Who use your product or service? Who are affected by it’s use? Are they men/women, of different ages, etc?
                                </p>
                                -->
                                <!-- Into text toggle -->
                                <!-- <button type="button" class="intro-toggle"> -->
                                    <!-- glyphicon glyphicon-minus-sign -->
                                    <!--
                                    <span class="intro-toggle-icon glyphicon glyphicon-minus-sign"></span>
                                    <span class="intro-toggle-text">Hide description</span>
                                </button>
                                -->
                                <!-- Item list in the field -->
                                <!-- The ul id is used in js code to give the right name attribute to the added cards (user input) -->
                                <ul id="field_01" class="item_list sortable connectedList">
                                </ul>
                                <!-- The Box With All User input Thing -->
                                <!-- # Tag selected term link -->
                                <p class="tag-selected-term">
                                    <a href="#">
                                        Tag selected term
                                    </a>
                                </p>
                                <div class="add_box">
                                    <!-- # Add idea link -->
                                    <p>
                                        <a class="add-idea" href="#">
                                            Add an idea
                                        </a>
                                    </p>
                                    <!-- # User Input -->
                                    <div class="user-input">
                                        <label>Your Idea</label><br />
                                        <p>
                                            <textarea class="new_item expandable" rows="2" maxlength="100" data-limit-rows="true" data-autoresize type="text" name="new_item" placeholder="Write an idea here ..."></textarea>
                                        </p>
                                        <p class="chars-count">
                                            <span class="chars">100</span>
                                            characters remaining
                                        </p>
                                        <button type="button" class="add_btn">Add</button>
                                    </div>
                                    <!-- End of user input -->
                                </div>
                                <!-- End of add_box -->
                                <div class="field-bottom">
                                    <img src="./icons/field1.svg" alt="field1" />
                                    <img src="./icons/number1.svg" alt="number1" />
                                </div>
                            </div>
                            <!-- End of .card -->
                        </div>
                        <div class="masonry-layout__panel" id="panel_03">
                            <div class="card field_03 masonry-layout__panel-content bg--blue">
                                <h2 class="field-title">
                                    <!-- FIELD -->
                                    <a href="#" data-toggle="tooltip" data-placement="left" title="How might people’s behaviour change because of your product or service? Their habits, time schedules, choice of activities, etc?"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>Behaviour
                                </h2>
                                <!--
                                <p class="intro">
                                    How might people’s behaviour change because of your product or service? Their habits, time schedules, choice of activities, etc?
                                </p>
                                -->
                                <!-- Into text toggle -->
                                <!-- <button type="button" class="intro-toggle"> -->
                                    <!-- glyphicon glyphicon-minus-sign -->
                                    <!--
                                    <span class="intro-toggle-icon glyphicon glyphicon-minus-sign"></span>
                                    <span class="intro-toggle-text">Hide description</span>
                                </button>
                                -->
                                <!-- Item list in the field -->
                                <!-- The ul id is used in js code to give the right name attribute to the added cards (user input) -->
                                <ul id="field_03" class="item_list sortable connectedList">
                                </ul>
                                <!-- The Box With All User input Thing -->
                                <!-- # Tag selected term link -->
                                <p class="tag-selected-term">
                                    <a href="#">
                                        Tag selected term
                                    </a>
                                </p>
                                <div class="add_box">
                                    <!-- # Add idea link -->
                                    <p>
                                        <a class="add-idea" href="#">
                                            Add an idea
                                        </a>
                                    </p>
                                    <!-- # User Input -->
                                    <div class="user-input">
                                        <label>Your Idea</label><br />
                                        <p>
                                            <textarea class="new_item expandable" rows="2" maxlength="100" data-limit-rows="true" data-autoresize type="text" name="new_item" placeholder="Write an idea here ..."></textarea>
                                        </p>
                                        <p class="chars-count">
                                            <span class="chars">100</span>
                                            characters remaining
                                        </p>
                                        <button type="button" class="add_btn">Add</button>
                                    </div>
                                    <!-- End of user input -->
                                </div>
                                <!-- End of add_box -->
                                <div class="field-bottom">
                                    <img src="./icons/field3.svg" alt="field3" />
                                    <img src="./icons/number3.svg" alt="number3" />
                                </div>
                            </div>
                            <!-- End of .card -->
                        </div>
                        <div class="masonry-layout__panel" id="panel_04">
                            <div class="card field_04 masonry-layout__panel-content bg--green">
                                <h2 class="field-title">
                                    <!-- Field -->
                                    <a href="#" data-toggle="tooltip" data-placement="left" title="How might relations between people and groups change because of your product or service? Between friends, family members, co-workers, etc?"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>Relations
                                </h2>
                                <!--
                                <p class="intro">
                                    How might relations between people and groups change because of your product or service? Between friends, family members, co-workers, etc?
                                </p>
                                -->
                                <!-- Into text toggle -->
                                <!-- <button type="button" class="intro-toggle"> -->
                                    <!-- glyphicon glyphicon-minus-sign -->
                                    <!--
                                    <span class="intro-toggle-icon glyphicon glyphicon-minus-sign"></span>
                                    <span class="intro-toggle-text">Hide description</span>
                                </button>
                                -->
                                <!-- Item list in the field -->
                                <!-- The ul id is used in js code to give the right name attribute to the added cards (user input) -->
                                <ul id="field_04" class="item_list sortable connectedList">
                                </ul>
                                <!-- The Box With All User input Thing -->
                                <!-- # Tag selected term link -->
                                <p class="tag-selected-term">
                                    <a href="#">
                                        Tag selected term
                                    </a>
                                </p>
                                <div class="add_box">
                                    <!-- # Add idea link -->
                                    <p>
                                        <a class="add-idea" href="#">
                                            Add an idea
                                        </a>
                                    </p>
                                    <!-- # User Input -->
                                    <div class="user-input">
                                        <label>Your Idea</label><br />
                                        <p>
                                            <textarea class="new_item expandable" rows="2" maxlength="100" data-limit-rows="true" data-autoresize type="text" name="new_item" placeholder="Write an idea here ..."></textarea>
                                        </p>
                                        <p class="chars-count">
                                            <span class="chars">100</span>
                                            characters remaining
                                        </p>
                                        <button type="button" class="add_btn">Add</button>
                                    </div>
                                    <!-- End of user input -->
                                </div>
                                <!-- End of add_box -->
                                <div class="field-bottom">
                                    <img src="./icons/field4.svg" alt="field4" />
                                    <img src="./icons/number4.svg" alt="number4" />
                                </div>
                            </div>
                            <!-- End of .card -->
                        </div>
                        <div class="masonry-layout__panel" id="panel_09">
                            <div class="card field_09 masonry-layout__panel-content bg--darkblue">
                                <h2 class="field-title">
                                    <!-- Field -->
                                    <a href="#" data-toggle="tooltip" data-placement="left" title="What are the most important ethical impacts you found? How can you address these by changing your design, organisation, or by proposing broader changes?"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>What can we do?
                                </h2>
                                <!--
                                <p class="intro">
                                    What are the most important ethical impacts you found? How can you address these by changing your design, organisation, or by proposing broader changes?
                                </p>
                                -->
                                <!-- Into text toggle -->
                                <!-- <button type="button" class="intro-toggle"> -->
                                    <!-- glyphicon glyphicon-minus-sign -->
                                    <!--
                                    <span class="intro-toggle-icon glyphicon glyphicon-minus-sign"></span>
                                    <span class="intro-toggle-text">Hide description</span>
                                </button>
                                -->
                                <!-- Item list in the field -->
                                <!-- The ul id is used in js code to give the right name attribute to the added cards (user input) -->
                                <ul id="field_09" class="item_list sortable connectedList">
                                </ul>
                                <!-- The Box With All User input Thing -->
                                <!-- # Tag selected term link -->
                                <p class="tag-selected-term">
                                    <a href="#">
                                        Tag selected term
                                    </a>
                                </p>
                                <div class="add_box">
                                    <!-- # Add idea link -->
                                    <p>
                                        <a class="add-idea" href="#">
                                            Add an idea
                                        </a>
                                    </p>
                                    <!-- # User Input -->
                                    <div class="user-input">
                                        <label>Your Idea</label><br />
                                        <p>
                                            <textarea class="new_item expandable" rows="2" maxlength="100" data-limit-rows="true" data-autoresize type="text" name="new_item" placeholder="Write an idea here ..."></textarea>
                                        </p>
                                        <p class="chars-count">
                                            <span class="chars">100</span>
                                            characters remaining
                                        </p>
                                        <button type="button" class="add_btn">Add</button>
                                    </div>
                                    <!-- End of user input -->
                                </div>
                                <!-- End of add_box -->
                                <div class="field-bottom">
                                    <img src="./icons/field9.svg" alt="field9" />
                                    <img src="./icons/number9.svg" alt="number9" />
                                </div>
                            </div>
                            <!-- End of .card -->
                        </div>
                        <div class="masonry-layout__panel" id="panel_05">
                            <div class="card field_05 masonry-layout__panel-content bg--seagreen">
                                <h2 class="field-title">
                                    <!-- Field -->
                                    <a href="#" data-toggle="tooltip" data-placement="left" title="How might people’s worldviews be affected by your product or service? Their ideas about consumption, religion, work, etc?"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>Worldviews
                                </h2>
                                <!--
                                <p class="intro">
                                    How might people’s worldviews be affected by your product or service? Their ideas about consumption, religion, work, etc?
                                </p>
                                -->
                                <!-- Into text toggle -->
                                <!-- <button type="button" class="intro-toggle"> -->
                                    <!-- glyphicon glyphicon-minus-sign -->
                                    <!--
                                    <span class="intro-toggle-icon glyphicon glyphicon-minus-sign"></span>
                                    <span class="intro-toggle-text">Hide description</span>
                                </button>
                                -->
                                <!-- Item list in the field -->
                                <!-- The ul id is used in js code to give the right name attribute to the added cards (user input) -->
                                <ul id="field_05" class="item_list sortable connectedList">
                                </ul>
                                <!-- The Box With All User input Thing -->
                                <!-- # Tag selected term link -->
                                <p class="tag-selected-term">
                                    <a href="#">
                                        Tag selected term
                                    </a>
                                </p>
                                <div class="add_box">
                                    <!-- # Add idea link -->
                                    <p>
                                        <a class="add-idea" href="#">
                                            Add an idea
                                        </a>
                                    </p>
                                    <!-- # User Input -->
                                    <div class="user-input">
                                        <label>Your Idea</label><br />
                                        <p>
                                            <textarea class="new_item expandable" rows="2" maxlength="100" data-limit-rows="true" data-autoresize type="text" name="new_item" placeholder="Write an idea here ..."></textarea>
                                        </p>
                                        <p class="chars-count">
                                            <span class="chars">100</span>
                                            characters remaining
                                        </p>
                                        <button type="button" class="add_btn">Add</button>
                                    </div>
                                    <!-- End of user input -->
                                </div>
                                <!-- End of add_box -->
                                <div class="field-bottom">
                                    <img src="./icons/field5.svg" alt="field5" />
                                    <img src="./icons/number5.svg" alt="number5" />
                                </div>
                            </div>
                            <!-- End of .card -->
                        </div>
                        <div class="masonry-layout__panel" id="panel_06">
                            <div class="card field_06 masonry-layout__panel-content bg--green1">
                                <h2 class="field-title">
                                    <!-- Field -->
                                    <a href="#" data-toggle="tooltip" data-placement="left" title="How might group conflict arise or be affected by your product or service? Could it disciminate between people, put them out of work, etc?"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>Group Conflicts
                                </h2>
                                <!--
                                <p class="intro">
                                    How might group conflict arise or be affected by your product or service? Could it disciminate between people, put them out of work, etc?
                                </p>
                                -->
                                <!-- Into text toggle -->
                                <!-- <button type="button" class="intro-toggle"> -->
                                    <!-- glyphicon glyphicon-minus-sign -->
                                    <!--
                                    <span class="intro-toggle-icon glyphicon glyphicon-minus-sign"></span>
                                    <span class="intro-toggle-text">Hide description</span>
                                </button>
                                -->
                                <!-- Item list in the field -->
                                <!-- The ul id is used in js code to give the right name attribute to the added cards (user input) -->
                                <ul id="field_06" class="item_list sortable connectedList">
                                </ul>
                                <!-- The Box With All User input Thing -->
                                <!-- # Tag selected term link -->
                                <p class="tag-selected-term">
                                    <a href="#">
                                        Tag selected term
                                    </a>
                                </p>
                                <div class="add_box">
                                    <!-- # Add idea link -->
                                    <p>
                                        <a class="add-idea" href="#">
                                            Add an idea
                                        </a>
                                    </p>
                                    <!-- # User Input -->
                                    <div class="user-input">
                                        <label>Your Idea</label><br />
                                        <p>
                                            <textarea class="new_item expandable" rows="2" maxlength="100" data-limit-rows="true" data-autoresize type="text" name="new_item" placeholder="Write an idea here ..."></textarea>
                                        </p>
                                        <p class="chars-count">
                                            <span class="chars">100</span>
                                            characters remaining
                                        </p>
                                        <button type="button" class="add_btn">Add</button>
                                    </div>
                                    <!-- End of user input -->
                                </div>
                                <!-- End of add_box -->
                                <div class="field-bottom">
                                    <img src="./icons/field6.svg" alt="field6" />
                                    <img src="./icons/number6.svg" alt="number6" />
                                </div>
                            </div>
                            <!-- End of .card -->
                        </div>
                        <div class="masonry-layout__panel" id="panel_02">
                            <div class="card field_02 masonry-layout__panel-content bg--purple">
                                <h2 class="field-title">
                                    <!-- Field -->
                                    <a href="#" data-toggle="tooltip" data-placement="left" title="Which groups are involved in the design, production, distribution and use of your product or service? Which groups might be affected by it? Are these work-related organisation, interest groups, etc?"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>Groups Affected
                                </h2>
                                <!--
                                <p class="intro">
                                    Which groups are involved in the design, production, distribution and use of your product or service? Which groups might be affected by it? Are these work-related organisation, interest groups, etc?
                                </p>
                                -->
                                <!-- Into text toggle -->
                                <!-- <button type="button" class="intro-toggle"> -->
                                    <!-- glyphicon glyphicon-minus-sign -->
                                    <!--
                                    <span class="intro-toggle-icon glyphicon glyphicon-minus-sign"></span>
                                    <span class="intro-toggle-text">Hide description</span>
                                </button>
                                -->
                                <!-- Item list in the field -->
                                <!-- The ul id is used in js code to give the right name attribute to the added cards (user input) -->
                                <ul id="field_02" class="item_list sortable connectedList">
                                </ul>
                                <!-- The Box With All User input Thing -->
                                <!-- # Tag selected term link -->
                                <p class="tag-selected-term">
                                    <a href="#">
                                        Tag selected term
                                    </a>
                                </p>
                                <div class="add_box">
                                    <!-- # Add idea link -->
                                    <p>
                                        <a class="add-idea" href="#">
                                            Add an idea
                                        </a>
                                    </p>
                                    <!-- # User Input -->
                                    <div class="user-input">
                                        <label>Your Idea</label><br />
                                        <p>
                                            <textarea class="new_item expandable" rows="2" maxlength="100" data-limit-rows="true" data-autoresize type="text" name="new_item" placeholder="Write an idea here ..."></textarea>
                                        </p>
                                        <p class="chars-count">
                                            <span class="chars">100</span>
                                            characters remaining
                                        </p>
                                        <button type="button" class="add_btn">Add</button>
                                    </div>
                                    <!-- End of user input -->
                                </div>
                                <!-- End of add_box -->
                                <div class="field-bottom">
                                    <img src="./icons/field2.svg" alt="field2" />
                                    <img src="./icons/number2.svg" alt="number2" />
                                </div>
                            </div>
                            <!-- End of .card -->
                        </div>
                        
                    </div>
                    
                    <!-- ================ 2 col ================ -->
                    <div class="masonry-layout2" id="2-col-layout">
                        <div class="masonry-layout__panel" id="panel_07">
                            <div class="card field_07 masonry-layout__panel-content bg--blue">
                                <h2 class="field-title">
                                    <!-- Field -->
                                    <a href="#" data-toggle="tooltip" data-placement="left" title="What are potential negative impact of your product or service failing to operate or to be used as intended? What happens with technical errors, security failures, etc?"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>Product or Service Failure
                                </h2>
                                <!--
                                <p class="intro">
                                    What are potential negative impact of your product or service failing to operate or to be used as intended?
                                    What happens with technical errors, security failures, etc?
                                </p>
                                -->
                                <!-- Into text toggle -->
                                <!-- <button type="button" class="intro-toggle"> -->
                                    <!-- glyphicon glyphicon-minus-sign -->
                                    <!--
                                    <span class="intro-toggle-icon glyphicon glyphicon-minus-sign"></span>
                                    <span class="intro-toggle-text">Hide description</span>
                                </button>
                                -->
                                <!-- Item list in the field -->
                                <!-- The ul id is used in js code to give the right name attribute to the added cards (user input) -->
                                <ul id="field_07" class="item_list sortable connectedList">
                                </ul>
                                <!-- The Box With All User input Thing -->
                                <!-- # Tag selected term link -->
                                <p class="tag-selected-term">
                                    <a href="#">
                                        Tag selected term
                                    </a>
                                </p>
                                <div class="add_box">
                                    <!-- # Add idea link -->
                                    <p>
                                        <a class="add-idea" href="#">
                                            Add an idea
                                        </a>
                                    </p>
                                    <!-- # User Input -->
                                    <div class="user-input">
                                        <label>Your Idea</label><br />
                                        <p>
                                            <textarea class="new_item expandable" rows="2" maxlength="100" data-limit-rows="true" data-autoresize type="text" name="new_item" placeholder="Write an idea here ..."></textarea>
                                        </p>
                                        <p class="chars-count">
                                            <span class="chars">100</span>
                                            characters remaining
                                        </p>
                                        <button type="button" class="add_btn">Add</button>
                                    </div>
                                    <!-- End of user input -->
                                </div>
                                <!-- End of add_box -->
                                <div class="field-bottom">
                                    <img src="./icons/field7.svg" alt="field7" />
                                    <img src="./icons/number7.svg" alt="number7" />
                                </div>
                            </div>
                            <!-- End of .card -->
                        </div>
                        <div class="masonry-layout__panel" id="panel_08">
                            <div class="card field_08 masonry-layout__panel-content bg--green">
                                <h2 class="field-title">
                                    <!-- Field -->
                                    <a href="#" data-toggle="tooltip" data-placement="left" title="What are potential negative impacts of the consumption of resources relating to your project? What happens with its use of energy, personal data, etc?"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>Problematic Use of Resources
                                </h2>
                                <!--
                                <p class="intro">
                                    What are potential negative impacts of the consumption of resources relating to your project? What happens with its use of energy, personal data, etc?
                                </p>
                                -->
                                <!-- Into text toggle -->
                                <!-- <button type="button" class="intro-toggle"> -->
                                    <!-- glyphicon glyphicon-minus-sign -->
                                    <!--
                                    <span class="intro-toggle-icon glyphicon glyphicon-minus-sign"></span>
                                    <span class="intro-toggle-text">Hide description</span>
                                </button>
                                -->
                                <!-- Item list in the field -->
                                <!-- The ul id is used in js code to give the right name attribute to the added cards (user input) -->
                                <ul id="field_08" class="item_list sortable connectedList">
                                </ul>
                                <!-- The Box With All User input Thing -->
                                <!-- # Tag selected term link -->
                                <p class="tag-selected-term">
                                    <a href="#">
                                        Tag selected term
                                    </a>
                                </p>
                                <div class="add_box">
                                    <!-- # Add idea link -->
                                    <p>
                                        <a class="add-idea" href="#">
                                            Add an idea
                                        </a>
                                    </p>
                                    <!-- # User Input -->
                                    <div class="user-input">
                                        <label>Your Idea</label><br />
                                        <p>
                                            <textarea class="new_item expandable" rows="2" maxlength="100" data-limit-rows="true" data-autoresize type="text" name="new_item" placeholder="Write an idea here ..."></textarea>
                                        </p>
                                        <p class="chars-count">
                                            <span class="chars">100</span>
                                            characters remaining
                                        </p>
                                        <button type="button" class="add_btn">Add</button>
                                    </div>
                                    <!-- End of user input -->
                                </div>
                                <!-- End of add_box -->
                                <div class="field-bottom">
                                    <img src="./icons/field8.svg" alt="field8" />
                                    <img src="./icons/number8.svg" alt="number8" />
                                </div>
                            </div>
                            <!-- End of .card -->
                        </div>
                    </div>
                    
                    <!-- ================ 1 col ================ -->
                    <div class="masonry-layout" id="1-col-layout">
                        <div class="masonry-layout__panel" id="panel_10">
                            <div class="card field_10 masonry-layout__panel-content bg--purple">
                                <h2 class="field-title">
                                    <!-- Field -->
                                    <a href="#" data-toggle="tooltip" data-placement="left" title="Here you can place your ideas that still haven't been categorised"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>Uncategorised ideas
                                </h2>
                                <!--
                                <p class="intro">
                                    What are potential negative impact of your product or service failing to operate or to be used as intended?
                                    What happens with technical errors, security failures, etc?
                                </p>
                                -->
                                <!-- Into text toggle -->
                                <!-- <button type="button" class="intro-toggle"> -->
                                <!-- glyphicon glyphicon-minus-sign -->
                                <!--
                                <span class="intro-toggle-icon glyphicon glyphicon-minus-sign"></span>
                                <span class="intro-toggle-text">Hide description</span>
                                </button>
                                -->
                                <!-- Item list in the field -->
                                <!-- The ul id is used in js code to give the right name attribute to the added cards (user input) -->
                                <ul id="field_10" class="item_list sortable connectedList">
                                </ul>
                                <!-- The Box With All User input Thing -->
                                <!-- # Tag selected term link -->
                                <p class="tag-selected-term">
                                    <a href="#">
                                        Tag selected term
                                    </a>
                                </p>
                                <div class="add_box">
                                    <!-- # Add idea link -->
                                    <p>
                                        <a class="add-idea" href="#">
                                            Add an idea
                                        </a>
                                    </p>
                                    <!-- # User Input -->
                                    <div class="user-input">
                                        <label>Your Idea</label><br />
                                        <p>
                                            <textarea class="new_item expandable" rows="2" maxlength="100" data-limit-rows="true" data-autoresize type="text" name="new_item" placeholder="Write an idea here ..."></textarea>
                                        </p>
                                        <p class="chars-count">
                                            <span class="chars">100</span>
                                            characters remaining
                                        </p>
                                        <button type="button" class="add_btn">Add</button>
                                    </div>
                                    <!-- End of user input -->
                                </div>
                                <!-- End of add_box -->
                                <div class="field-bottom">
                                    <img src="./icons/field10.svg" alt="field10" />
                                </div>
                            </div>
                            <!-- End of .card -->
                        </div>
                    </div>
                </div>
                <!-- End of .canvas.box -->
                <!-- FORM BUTTON BOX -->
                <div class="row">
                    
                    <div class="imp-exp-btn col-md-4 col-md-offset-4">
                        
                        <!-- Form button -->
                        
                        <?php if(!empty($name)) { ?>
                        
                        <p class="text-center" id="save-canvas">
                            <!-- Export JSON and also save the canvas for the registered user -->
                            <button class="json_exp" type="button" name="json_exp">Save This Canvas</button>
                        </p>
                        
                        <p class="text-center" id="saved-automatically">
                            Canvases with collaborators are saved automatically
                        </p>
                        
                        <!-- BEGIN SHARE CANVAS -->
                        <p class="text-center">
                            <button class="share_canvas" type="submit" name="share-canvas">Share This Canvas</button>
                        </p>
                        <div class="share_canvas_email text-center">
                            <p>
                                <label>Send this canvas to:</label>
                            </p>
                            <p>
                                <input type="email" name="share-canvas-email" placeholder="Please enter an email address..."/>
                            </p>
                            <p class="text-center">
                                <button class="share_canvas_send" type="button" name="share-canvas-send">Send</button>
                            </p>
                        </div>
                        <!-- END SHARE CANVAS -->
                        
                        
                        <?php } else { ?>
                        
                        <p class="text-center">
                            <!-- Export JSON and also save the canvas for the registered user -->
                            <a class="login-to-save"  href="../index.html">Sign&nbsp;up&nbsp;or&nbsp;login to&nbsp;save&nbsp;your&nbsp;canvas</a>
                        </p>
                        <?php }?>
                        
                        
                        <!-- BEGIN EXPORT PDF -->
                        <p class="text-center">
                            <input class="pdf_exp" type="submit" name="export-pdf" value="Download as PDF">
                        </p>
                        <!-- END EXPORT PDF -->
                        
                    </div>
                    
                </div>
                
                <!-- Start of move-window -->
                <div class="window" id="move-window">
                    <button type="button" class="close" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h2>Move idea to...</h2>
                    <ul>
                        <li>
                            <a href="#">1.&nbsp;&nbsp;Individuals Affected</a>
                        </li>
                        <li>
                            <a href="#">2.&nbsp;&nbsp;Groups Affected</a>
                        </li>
                        <li>
                            <a href="#">3.&nbsp;&nbsp;Behaviour</a>
                        </li>
                        <li>
                            <a href="#">4.&nbsp;&nbsp;Relations</a>
                        </li>
                        <li>
                            <a href="#">5.&nbsp;&nbsp;Worldviews</a>
                        </li>
                        <li>
                            <a href="#">6.&nbsp;&nbsp;Group Conflicts</a>
                        </li>
                        <li>
                            <a href="#">7.&nbsp;&nbsp;Product or Service Failure</a>
                        </li>
                        <li>
                            <a href="#">8.&nbsp;&nbsp;Problematic Use of Resources</a>
                        </li>
                        <li>
                            <a href="#">9.&nbsp;&nbsp;What can we do?</a>
                        </li>
                        <li>
                            <a href="#">10.&nbsp;&nbsp;Uncategorised ideas</a>
                        </li>
                    </ul>
                    <!--
                    <h2 id="tag-description">
                        Tag description
                    </h2>
                    <textarea rows="4" cols="50" maxlength="200" id="tag-description">Please enter a description...</textarea><br />
                    <p class="chars-count">
                        <span class="chars">200</span>
                        characters remaining
                    </p>
                    <button type="button" class="window-button" id="save-tag">Save tag</button>&nbsp;
                    <button type="button" class="window-button" id="delete-tag">Delete tag</button>
                    <h2 class="similar-tags">Similar tags by other users</h2>
                    <p class='similar-tags-description-none'>No similar tags could be found!</p>
                    -->
                </div>                
                <!-- End of move-window -->
                
                <!-- Start of tag-window -->
                <div class="window" id="tag-window">
                    <button type="button" class="close" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <!-- <div id="tag-window-container"> -->
                    <h1></h1>
                    <h2 id="tag-description">
                        Tag Description
                    </h2>
                    <textarea rows="4" cols="50" maxlength="200" id="tag-description">Please enter a description...</textarea><br />
                    <p class="chars-count">
                        <span class="chars">200</span>
                        characters remaining
                    </p>
                    <button type="button" class="window-button" id="save-tag">Save Tag</button>&nbsp;
                    <button type="button" class="window-button" id="delete-tag">Delete Tag</button>
                    <h2 class="similar-tags">Similar tags by other users</h2>
                    <p class='similar-tags-description-none'>No similar tags could be found!</p>
                    <!-- </div> -->
                </div>
                <!-- End of tag-window -->
                
                <!-- Start of Collaborators -->
                <div class="window" id="collaborators-window">
                    <button type="button" class="close" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h1>
                        Collaborators
                    </h1>
                    <h2>
                        List of Collaborators
                    </h2>
                    <table>
                    </table>
                    <label><input type="checkbox" name="show-only-active" /> Show only active collaborators</label><br />
                    <h2>
                        Add Collaborator
                    </h2>
                    <input type="email" name="add-collaborator" value="Please enter an email address..." />
                    <button type="button" class="window-button" id="add-collaborator">Add</button>
                    <div class="error-message" id="username-already-exists">The username already exists!</div>
                    <div class="error-message" id="enter-valid-email">Please enter a valid email address!</div>
                </div>
                <!-- End of Collaborators -->
                
            </form>
            <!-- End of .form -->
            <!-- Hidden place to show JSON info -->
            <pre id="result" class="text-center">
            
            </pre>
            
            <div class="row">
                <footer class="col-md-12 text-center">
                    <div class="contact">
                        <h2>Contact us:</h2>
                        <p>hello@ethicscanvas.org</p>
                    </div>
                    <div class="license">
                        <p>The Ethics Canvas is adapted from Alex Osterwalder’s Business Model Canvas.</p>
                        <p>The Business Model Canvas is designed by: Business Model Foundry AG.
                        </p>
                        <p>
                            This work is licensed under the Creative Commons Attribution-Share Alike 3.0 unported license.</p>
                        <p class="cc"><span class="glyphicon glyphicon-list" aria-hidden="true"></span> View a copy of this license on:</p>
                        <p>
                            <a href="https://creativecommons.org/licenses/by-sa/3.0/">creativecommons.org</a>
                        </p>
                        <p class="bmc"><span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
                            View the original Business Model Canvas on:
                        </p>
                        <p>
                            <a href="https://strategyzer.com/canvas">strategyzer.com</a>
                        </p>
                    </div>
                    <div class="license-icons">
                        <ul>
                            <li><img src="../icon/by.large.png" alt="ethics-canvas-by-icon"/> </li>
                            <li><img src="../icon/share.large.png" alt="ethics-canvas-share-icon"/> </li>
                            <li><img src="../icon/cc.large.png" alt="ethics-canvas-cc-icon"/> </li>
                            <li><img src="../icon/remix.large.png" alt="ethics-canvas-remix-icon"/></li>
                            <li><img src="../icon/sa.large.png" alt="ethics-canvas-sa-icon"/></li>
                        </ul>
                    </div>
                    <p class="ethics-copy terms"><a href="../privacy-terms/terms.html">Terms of Service</a></p>
                    <p class="ethics-copy privacy"><a href="../privacy-terms/privacy.html">Privacy Policy</a></p>
                    
                    <p class="ethics-copy">The ADAPT Centre for Digital Content Technology</p> <p class="ethics-copy">is funded under the SFI Research Centres Programme (Grant 13/RC/2106).</p><p class="ethics-copy">It is co-funded under the European Regional Development Fund.</p>
                    <p class="ethics-copy">Ethics Canvas v1.8&nbsp;|&nbsp;&copy; ADAPT Centre &amp; Trinity College Dublin &amp; Dublin City University, 2017</p>
                    
                </footer>
            </div>
        </div>
        <!-- End of container-fluid -->
        
        <!-- Start of dialogs -->
        <div id="shadow">&nbsp;</div>
        <div class="dialog" id="dialog-log-in">
            <div class="dialog-header">
                <button type="button" class="close" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h2>
                    Please log in
                </h2>
            </div>
            <div class="dialog-content"><p>Please log in to use this function.</p></div>
        </div>
        <div class="dialog" id="dialog-select-term">
            <div class="dialog-header">
                <button type="button" class="close" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                </button>
                <h2>
                    Please select term
                </h2>
            </div>
            <div class="dialog-content"><p>Please select a term to be tagged.</p></div>
        </div>
        <!--
        <div class="dialog" id="dialog-tag-already-exists" title="Tag already exists">
            <p>The tag already exists!</p>
        </div>
        -->
        <!-- End of ialogs -->
        
        <!-- jQuery -->
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
        <!-- jquery UI -->
        <script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js" integrity="sha256-55Jz3pBCF8z9jBO1qQ7cIf0L+neuPTD1u7Ytzrp2dqo=" crossorigin="anonymous"></script>
        <!-- Bootstrap -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        <!-- Bootstrap -->
        <script src="js/jquery-fieldselection.min.js"></script>
        <!-- The app javascript -->
        <script src="js/canvas.js" charset="utf-8"></script>
        <script language="javascript" type="text/javascript"></script>
        
    </body>
</html>