#ifndef ____workflow_h__
#define ____workflow_h__

#include "HTTPPage.h"

namespace http {

   class __workflow : public HTTPPage {

      int page(HTTPParameters &p) override {

         p.data << "<svg style=\"width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;\">"
                   " <path id=\"connector0\" data-source=\"start:bottom\" data-dest=\"formpage1\" d=\"\" stroke=\"#FFFFFF\" stroke-width=\"1\" fill=\"none\" />"
                   " <path id=\"connector1\" data-source=\"formpage1:next\" data-dest=\"formpage2\" d=\"\" stroke=\"#FFFFFF\" stroke-width=\"1\" fill=\"none\" />"
                   " <path id=\"connector2\" data-source=\"formpage2:next\" data-dest=\"formpage3\" d=\"\" stroke=\"#FFFFFF\" stroke-width=\"1\" fill=\"none\" />"
                   " <path id=\"connector3\" data-source=\"formpage2:previous\" data-dest=\"formpage1\" d=\"\" stroke=\"#FFFFFF\" stroke-width=\"1\" fill=\"none\" />"
                   " <path id=\"connector4\" data-source=\"formpage3:previous\" data-dest=\"formpage2\" d=\"\" stroke=\"#FFFFFF\" stroke-width=\"1\" fill=\"none\" />"
                   " <path id=\"connector5\" data-source=\"formpage3:process\" data-dest=\"processform\" d=\"\" stroke=\"#FFFFFF\" stroke-width=\"1\" fill=\"none\" />"
                   "</svg>"
                   "<div style=\"position: absolute; width: 200px; top: 20px; left: 50px; background: #C04040; border: 1px solid white;\" id=\"start\""
                   "     onmousedown=\"mousedown(this, event); return true;\" "
                   "     onmouseup=\"mouseup(event); return true;\" "
                   "     onmousemove=\"mousemove(event); return true;\">"
                   "[AQ] START"
                   "</div>"
                   ""
                   "<div style=\"position: absolute; top: 100px; left: 150px; background: #E0E0E0; border: 1px solid white; color: #000000;\" "
                   "     id=\"formpage1\""
                   "     onmousedown=\"mousedown(this, event); return true;\" "
                   "     onmouseup=\"mouseup(event); return true;\" "
                   "     onmousemove=\"mousemove(event); return true;\">"
                   ""
                   " <div style=\"width: 200px; height: 20px; padding-left: 3px; background: #4040C0; color: #FFFFFF;\">"
                   "  <span>[XQ] FORM Page 1</span> "
                   " </div>"
                   " <div data-name=\"cancel\" style=\"width: 200px; height: 20px; margin-top: 2px; padding-left: 3px ;background: #C0C0FF;\">"
                   "  <span>Cancel</span> "
                   " </div>"
                   " <div data-name=\"next\" style=\"width: 200px; height: 20px; margin-top: 2px; padding-left: 3px; background: #C0C0FF;\">"
                   "  <span>Next</span> "
                   " </div>"
                   "</div>"
                   ""
                   "<div style=\"position: absolute; top: 300px; left: 250px; background: #E0E0E0; border: 1px solid white;\" "
                   "     id=\"formpage2\" "
                   "     onmousedown=\"mousedown(this, event); return true;\" "
                   "     onmouseup=\"mouseup(event); return true;\" "
                   "     onmousemove=\"mousemove(event); return true;\">"
                   " <div style=\"width: 200px; height: 20px; padding-left: 3px; background: #4040C0; color: #FFFFFF;\">"
                   "  <span>[XQ] FORM Page 2</span> "
                   " </div>"
                   " <div data-name=\"previous\" style=\"width: 200px; height: 20px; margin-top: 2px; padding-left: 3px ;background: #C0C0FF;\">"
                   "  <span>Previous</span> "
                   " </div>"
                   " <div data-name=\"next\" style=\"width: 200px; height: 20px; margin-top: 2px; padding-left: 3px; background: #C0C0FF;\">"
                   "  <span>Next</span> "
                   " </div>"
                   "</div>"
                   ""
                   "<div style=\"position: absolute; top: 400px; left: 200px; background: #E0E0E0; border: 1px solid white;\" "
                   "     id=\"formpage3\" "
                   "     onmousedown=\"mousedown(this, event); return true;\" "
                   "     onmouseup=\"mouseup(event); return true;\" "
                   "     onmousemove=\"mousemove(event); return true;\">"
                   " <div style=\"width: 200px; height: 20px; padding-left: 3px; background: #4040C0; color: #FFFFFF;\">"
                   "  <span>[XQ] FORM Page 3</span> "
                   " </div>"
                   " <div data-name=\"previous\" style=\"width: 200px; height: 20px; margin-top: 2px; padding-left: 3px ;background: #C0C0FF;\">"
                   "  <span>Previous</span> "
                   " </div>"
                   " <div data-name=\"process\" style=\"width: 200px; height: 20px; margin-top: 2px; padding-left: 3px; background: #C0C0FF;\">"
                   "  <span>Process Form</span> "
                   " </div>"
                   "</div>"
                   ""
                   "<div style=\"position: absolute; top: 500px; left: 200px; background: #E0E0E0; border: 1px solid white;\" "
                   "     id=\"processform\" "
                   "     onmousedown=\"mousedown(this, event); return true;\" "
                   "     onmouseup=\"mouseup(event); return true;\" "
                   "     onmousemove=\"mousemove(event); return true;\">"
                   " <div style=\"width: 200px; height: 20px; padding-left: 3px; background: #40C040; color: #FFFFFF;\">"
                   "  <span>[PQ] Process Form</span> "
                   " </div>"
                   " <div data-name=\"previous\" style=\"width: 200px; height: 20px; margin-top: 2px; padding-left: 3px ;background: #C0C0FF;\">"
                   "  <span>Previous</span> "
                   " </div>"
                   " <div data-name=\"process\" style=\"width: 200px; height: 20px; margin-top: 2px; padding-left: 3px; background: #C0C0FF;\">"
                   "  <span>Process Form</span> "
                   " </div>"
                   "</div>"
                   ""
                   "<script src=\"/__workflow_js\" />";

	      p.httpRequest.response.addHeader(coreutils::IMFHeader("Content-Type", "script/javascript"));
         return 1;

      }

   };

}

#endif